.reservation-category {
	header {
		display: flex;
		align-items: center;
		gap: calc(2 * var(--spacing));
		padding: calc(4 * var(--spacing));
		background-color: var(--bg-color-light);

		svg {
			width: calc(4 * var(--spacing));
			height: calc(4 * var(--spacing));
		}
	}
}

.reservation {
	display: flex;
	align-items: center;
	gap: calc(4 * var(--spacing));
	padding: calc(4 * var(--spacing));
	border-bottom: 1px solid var(--color-neutral-200);

	.image {
		width: calc(16 * var(--spacing));
		height: calc(16 * var(--spacing));
	}

	.reservation-details {
		flex-grow: 1;

		.reservation-inner {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: calc(4 * var(--spacing));

			h3 {
				font-size: var(--text-sm);
			}

			.reservation-status {
				display: flex;
				align-items: center;
				gap: calc(2 * var(--spacing));
				font-size: var(--text-sm);
			}
		}

		.reservation-notes {
			display: flex;
			flex-direction: column;
			gap: calc(2 * var(--spacing));
		}
	}
}

@media (width < 40rem) {
	#reservations {
		display: flex;
		flex-direction: column;
		gap: calc(2 * var(--spacing));
	}
}

.reservation-radio-group {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: calc(3 * var(--spacing));
	max-height: calc(128 * var(--spacing));
	overflow-y: scroll;
}

.reservation-radio {
	display: flex;
	align-items: center;
	border: 1px solid var(--color-neutral-200);
	border-radius: var(--rounded-md);
	padding: calc(3 * var(--spacing));

	.image {
		width: calc(16 * var(--spacing));
		height: calc(16 * var(--spacing));
		margin-right: calc(4 * var(--spacing));
	}
}