vac-optimizer/src/app/components/user-input/user-input.scss

.user-input {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 1rem;
	min-width: 0;
}

.section-heading {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;

	h2,
	p {
		margin: 0;
	}

	h2 {
		font-size: 1.125rem;
		font-weight: 700;
		line-height: 1.2;
		text-wrap: balance;
	}

	p {
		max-width: 55ch;
		font-size: 0.875rem;
		color: var(--ui-text-secondary, #45464f);
		line-height: 1.5;
	}
}

.planning-dates {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-column: 1 / -1;
	column-gap: 1rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;

	legend {
		font-weight: 600;
	}

	mat-form-field {
		min-width: 0;
		width: 100%;
	}

	p {
		grid-column: 1 / -1;
		margin: 0.5rem 0 1rem;
		color: var(--ui-text-secondary);
		font-size: 0.875rem;
		line-height: 1.5;
	}

	.validation-error {
		color: var(--ui-error-text);
		background: var(--ui-error-bg);
		padding: 0.75rem;
		border-radius: 0.5rem;
	}
}

.listOfDays {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.declaration-controls {
	display: grid;
	container: declaration-controls / inline-size;
	grid-column: 1 / -1;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-sm);
	background: var(--ui-panel-bg);

	&.is-active {
		border-color: var(--mat-sys-primary);
	}
}

.declaration-entry-toggle {
	justify-content: flex-start;
	width: 100%;
	height: auto;
	min-height: 3.25rem;
	padding: 0.75rem 1rem;
	border-radius: calc(var(--ui-radius-sm) - 1px);
	text-align: start;
	line-height: 1.5;
	transition:
		background-color 150ms ease-out,
		color 150ms ease-out;

	&[aria-pressed='true'] {
		background: var(--mat-sys-primary-container);
		color: var(--mat-sys-on-primary-container);
	}
}

.declaration-types {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	padding: 0.75rem;

	button {
		min-height: 2.75rem;
		height: auto;
		padding: 0.5rem;
		border-radius: calc(var(--ui-radius-sm) - 1px);
		background-color: var(--ui-card-bg);
		color: var(--number-color);
		line-height: 1.5;

		&[data-declared-type='cp'] {
			background-color: var(--cp-bg);
		}
		&[data-declared-type='rtt'] {
			background-color: var(--rtt-bg);
		}
		&[data-declared-type='other'] {
			background-color: var(--other-bg);
		}
		&[aria-pressed='true'] {
			border-color: currentColor;
			box-shadow: inset 0 0 0 1px currentColor;
		}
		&[data-declared-type][aria-pressed='true'] {
			background-image: var(--declared-day-pattern);
		}
		&[aria-pressed='false'] .declaration-type-check {
			visibility: hidden;
		}
	}
}

.day-input-wrapper {
	animation: slide-fade-in 200ms ease-out;

	@starting-style {
		opacity: 0;
		transform: translateX(-20px);
	}
}

.day-enter {
	animation: slide-fade-in 200ms ease-out;
}

.day-leave {
	opacity: 0;
	transform: translateX(20px);
	transition:
		opacity 200ms ease-in,
		transform 200ms ease-in;
}

@keyframes slide-fade-in {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

form {
	display: flex;
	flex-direction: column;
}

.add-day-button,
.calculate-button {
	width: 100%;
	min-height: 3rem;
}

.duration-estimate {
	grid-column: 1 / -1;
	margin: 0 0 -0.5rem;
	color: var(--ui-text-secondary);
	font-size: 0.875rem;
	line-height: 1.5;
}

.add-day-button {
	display: flex;
	justify-content: center;
	border-style: dashed;
	border-color: var(--mat-sys-outline);
	border-radius: var(--ui-radius-sm);
}

.calculate-button {
	min-height: 3.25rem;
	border-radius: var(--ui-radius-sm);
	font-weight: 600;
}

.warning-card {
	background: var(--ui-warning-bg, #fff4d6);
	color: var(--ui-warning-text, #4f3800);

	&.is-informational {
		background: var(--ui-panel-bg);
		color: var(--mat-sys-on-surface);
	}
}

.warning-content {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;

	mat-icon {
		flex-shrink: 0;
	}
}

.warning {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	overflow-wrap: break-word;
	line-height: 1.5;

	p {
		margin: 0.25rem 0;
	}
}

.remaining-balances {
	display: grid;
	gap: 1rem;
	margin: 0.5rem 0;
	padding-inline-start: 1.25rem;
}

:host {
	display: block;
	container: user-input / inline-size;
	max-width: 100%;
}

@container declaration-controls (min-width: 18rem) {
	.declaration-types {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container declaration-controls (min-width: 34rem) {
	.declaration-types {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@container user-input (min-width: 40rem) {
	.planning-dates {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.listOfDays {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.add-day-button {
		grid-column: 1 / -1;
	}
}

@container user-input (min-width: 48rem) {
	.user-input {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.5rem;
	}
	.section-heading,
	.calculate-button,
	.warning-card {
		grid-column: 1 / -1;
	}
	.listOfDays {
		grid-template-columns: minmax(0, 1fr);
	}
}

.jump-to-plan {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	min-height: 2.75rem;
	color: var(--mat-sys-primary);
	font-size: 0.875rem;
	text-underline-offset: 0.25em;
}
@media (min-width: 75rem) {
	.jump-to-plan {
		display: none;
	}
}