body {
	padding: min(5em, 5vw);
}

#Page {
	width: min(450px, 100%);
}

#Passkey,
#Application {
	width: 100%;
}

#Generator {
	height: min-content;
}

#Canvas {
	padding         : var(--cmp-spacing);
	background-color: var(--darken-10);

	#Output {
		width           : 100%;
		padding         : 0 var(--cmp-spacing);
		background-color: var(--darken-10);

		&>span.sEmpty {
			color: var(--dark-gray);
		}
	}

	#Timer>.progress {
		flex            : 0 0 0;
		height          : 3px;
		background-color: var(--blue);
	}
}

#Suggestions {
	position        : absolute;
	min-width       : 70%;
	max-width       : 100%;
	max-height      : 250px;
	inset           : calc(100% + 0.5em) auto auto 0;
	border          : var(--border-std);
	border-radius   : var(--radius-std);
	background-color: var(--white);

	:has(#Passkey:placeholder-shown) & {
		display: none;
	}

	:has(#Application:placeholder-shown) & {
		display: none;
	}

	:not(:has(#Application:focus)) & {
		display: none;
	}

	&::before {
		z-index         : -1;
		position        : absolute;
		width           : 0.5em;
		height          : 0.5em;
		inset           : 0 50% auto auto;
		transform       : translate(50%, -50%) rotate(45deg);
		background-color: var(--black);
		content         : "";
	}

	&:not(.sEmpty) {
		.placeholder {
			display: none;
		}
	}

	&.sEmpty {
		.list {
			display: none;
		}
	}

	.placeholder {
		padding: var(--cmp-spacing);
	}

	.list {
		padding : var(--cmp-spacing);
		overflow: auto;
	}

	.appID {
		display    : flex;
		align-items: center;

		.delete {
			margin-right    : var(--cmp-spacing);
			padding         : 0 0.3em 0.1em 0.3em;
			border-radius   : var(--radius-std);
			background-color: var(--red);
			color           : var(--white);
			font            : var(--fw-commit-bold) 1em var(--ff-mono);
			cursor          : pointer;
			user-select     : none;
		}

		.string {
			cursor: copy;
		}

		&:hover .string {
			text-decoration: underline;
		}
	}

	.controls {
		padding         : var(--cmp-spacing);
		background-color: var(--darken-10);
	}
}