.user-input {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}

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

	h2,
	p {
		margin: 0;
	}

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

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

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

.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;
}

.add-day-button {
	display: flex;
	justify-content: flex-start;
}

.calculate-button {
	min-height: 3.25rem;
	font-weight: 600;
}

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

.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;
}

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