@layer common, per-card, nav, animations;

/* base colors, elevations, fonts, etc */
@import url('/static/theme.css');
/* common body framing, card styling, etc */
@import url('/static/common.css');
/* animations */
@import url('/static/animations.css');


@layer per-card {
	/* card-specific stuff */
	#login-page {
		form {
			margin: 0;
			padding: 0;

			display: flex;
			flex-direction: row;

			border-radius: var(--std-radius);
			box-shadow: var(--elevation-1dp);
			overflow: clip;

			input[type="text"] {
				/* need these so that the focus border doesn't still look square
				 * and get clipped :-/ */
				border-top-left-radius: var(--std-radius);
				border-bottom-left-radius: var(--std-radius);

				border: 0;
				vertical-align: middle;
				padding-inline-start: 1em;

				padding-inline: 0.5em;
				padding-block: 0.25em;
				width: 100%;
			}
		}
	}
	#consent-page {
		main {
			display: grid;
			grid:
				'items items'
				'left right'
				/ 1fr min-content;
			grid-template-columns: 1fr min-content;
			row-gap: 1em;
			column-gap: 1em;
		}
		#no-consent {
			grid-area: left;
		}
		input[type="submit"] {
			border-radius: var(--std-radius);
			justify-self: end;
			grid-area: right;
		}
		#consent-rows {
			grid-area: items;
			display: grid;
			grid-template-columns: subgrid;
			grid-row-gap: 0.5em;
		}

		.consent-row {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			grid-column: span 2;

			input {
				order: 2;

				appearance: none;

				border: 2px solid var(--color-on-surface-variant);
				width: 18px;
				height: 18px;
				border-radius: var(--std-radius);
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: flex-end;

				&:enabled:hover {
					border: 2px solid var(--color-on-surface);
					outline: 6px solid rgba(var(--color-primary-int), 0.08);
				}

				&:checked {
					border: 0;
					background-color: var(--color-primary);
					color: var(--color-on-primary);

					&:not(:enabled) {
						background-color: rgba(var(--color-primary-int), 0.38);
					}
					&:enabled:hover {
						outline: 6px solid rgba(var(--color-primary-int), 0.08);
						border: 0;
					}

					&::after {
						content: '✓';
						font-size: 200%;
						display: block;
						position: relative;
						top: 0.21em;
						left: -0.02em;
						pointer-events: none;
					}
				}

				&:not(:checked) + span {
					text-decoration: line-through;
				}
			}
			span {
				text-align: end;
				display: block;
				color: var(--color-on-surface);
				margin-inline-end: 0.25em;
			}
		}
		form {
			display: contents;
		}
	}
}