#61

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

@@ -37,6 +37,75 @@
 	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;
 
@@ -131,6 +200,18 @@ form {
 	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) {
 	.listOfDays {
 		display: grid;