@use '~flux/components/css/mixin';

.datePicker {
    display: flex;
    max-height: 420px;
    flex-flow: column;
    border-radius: inherit;
    overflow: auto;
    user-select: none;
    z-index: 0;
}

.datePickerDates,
.datePickerMonths,
.datePickerYears,
.datePickerHeader {
    padding: 15px;
}

.datePickerHeader {
    position: sticky;
    display: flex;
    top: 0;
    align-items: center;
    background: var(--gray-50);
    border-bottom: 1px solid var(--surface-stroke);
    z-index: 1;
}

.datePickerHeaderView {
    @include mixin.text(large);

    display: flex;
    height: 42px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    gap: 9px;
    font-weight: 600;
}

.datePickerHeaderViewButton {
    padding: 0;
    background: unset;
    border: 0;
    cursor: pointer;
    text-transform: capitalize;

    &:first-child {
        color: var(--foreground-prominent);
    }

    &:last-child {
        color: var(--foreground-secondary);
    }

    @include mixin.hover {
        color: var(--primary-600);
    }
}

.datePickerDate {
    @include mixin.text(small);

    display: flex;
    padding: 0;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: unset;
    border: 0;
    border-radius: var(--radius);
    color: var(--foreground-prominent);
    cursor: pointer;
    outline: 0;
    transition: var(--transition-default);
    transition-property: background, border-radius, color, opacity;

    @include mixin.hover {
        background: var(--gray-100);
        color: var(--foreground-prominent);
    }

    &.isDisabled:not(.isRangeEntry, .isRangeEnd, .isRangeStart, .isSelectionEntry, .isSelectionEnd, .isSelectionStart) {
        opacity: .25;
        pointer-events: none;
    }

    &:not(.isDisabled) {
        font-weight: 500;
    }

    &.isSelected {
        background: var(--primary-600);
        color: var(--primary-50);
        font-weight: 700;
    }

    &.isRangeEntry {
        background: var(--primary-200);
        border-radius: 0;
        color: var(--primary-950);
    }

    &.isRangeEnd,
    &.isRangeStart {
        background: var(--primary-600);
        color: var(--primary-50);
        font-weight: 700;
    }

    &.isRangeEntry:nth-child(7n + 8),
    &.isRangeStart {
        border-top-left-radius: var(--radius);
        border-bottom-left-radius: var(--radius);
    }

    &.isRangeEntry:nth-child(7n),
    &.isRangeEnd {
        border-top-right-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
    }

    &.isSelectionEntry {
        background: var(--gray-100);
        border-radius: 0;
        color: var(--foreground-prominent);
    }

    &.isSelectionEnd,
    &.isSelectionStart {
        background: var(--gray-200);
        font-weight: 700;
    }

    &.isSelectionEntry:nth-child(7n + 8),
    &.isSelectionStart {
        border-top-left-radius: var(--radius);
        border-bottom-left-radius: var(--radius);
    }

    &.isSelectionEntry:nth-child(7n),
    &.isSelectionEnd {
        border-top-right-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
    }
}

.datePickerDates {
    position: relative;
}

.datePickerDatesGrid {
    display: grid;
    gap: 3px 0;
    grid-template-columns: repeat(7, 1fr);
}

.datePickerDay {
    @include mixin.text(2xsmall);

    margin-bottom: 6px;
    color: var(--foreground-secondary);
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
}

.datePickerMonths,
.datePickerYears {
    display: grid;
    margin-left: auto;
    margin-right: auto;
    max-width: 300px;
    width: 100%;
    gap: 9px;
    grid-template-columns: repeat(3, 1fr);

    .button {
        contain: size layout;
        contain-intrinsic-size: 0 42px;
        content-visibility: auto;
        text-transform: capitalize;
    }
}