@reference "tailwindcss";

.weekly-date-picker {
	.selection {
		display: grid;
		grid-template-columns: 1fr 2fr 1fr;
		justify-items: center;

		.selected-date {
			@apply col-start-2;
		}

		.btn-today {
			@apply px-4 h-8 border text-white bg-black justify-self-end rounded-xl flex items-center justify-center;
		}
	}

	.date-period {
		@apply flex items-center justify-between py-2;

		.btn-left {
			img {
				@apply w-5 h-5;
			}
		}

		.btn-right {
			img {
				@apply w-5 h-5;
			}
		}

		.period {
			@apply font-bold;
		}
	}

	.calendar {
		@apply w-full rounded-xl;

		table {
			@apply table-fixed w-full;
			/* Ensure fixed layout and full width */

			thead th,
			tbody td {
				@apply text-center;
				/* Center-align content */
			}
		}

		.day {
			@apply text-center pb-4;
		}

		.date {
			@apply text-center cursor-pointer rounded-xl h-8;

			&.disabled {
				@apply text-gray-300 pointer-events-none;
			}

			&.selected {
				@apply bg-gray-800 text-white;
			}
		}
	}
}