@import 'air-datepicker/air-datepicker.css';

.air-datepicker-global-container {
    /* Allows the datepicker to be shown on top of offcanvas */
    z-index: 2000;
}

.air-datepicker {
    --adp-accent-color: var(--color-primary);
    --adp-day-name-color: var(--color-primary);
    --adp-background-color: var(--color-base-100);
    --adp-color: var(--color-base-content);
    --adb-color-other-month: color-mix(in oklab, var(--color-base-content) 50%, transparent);
    --adp-cell-background-color-selected: var(--color-primary);

    --adp-border-color-inline: var(--color-base-300);

    --adp-background-color-selected-other-month-focused: oklch(from var(--color-primary) calc(l * 0.9) c h);
    --adp-background-color-selected-other-month: var(--color-primary);

    --adp-color-secondary: color-mix(in oklab, var(--color-base-content) 60%, transparent);
    --adp-background-color-hover: var(--color-base-200);
    --adp-background-color-active: var(--color-base-300);
    --adp-cell-background-color-selected-hover: oklch(from var(--color-primary) calc(l * 0.9) c h);
    --adp-color-other-month: color-mix(in oklab, var(--color-base-content) 50%, transparent);
    --adp-color-disabled: color-mix(in oklab, var(--color-base-content) 30%, transparent);
    --adp-color-disabled-in-range: color-mix(in oklab, var(--color-base-content) 40%, transparent);
    --adp-color-other-month-hover: color-mix(in oklab, var(--color-base-content) 70%, transparent);
    --adp-time-track-color: var(--color-base-300);
    --adp-time-track-color-hover: var(--color-base-content);
}

.air-datepicker-cell.-selected-,
.air-datepicker-cell.-selected-.-current-,
.-selected-.air-datepicker-cell.-year-.-other-decade-,
.-selected-.air-datepicker-cell.-day-.-other-month- {
    color: var(--color-primary-content);
}

.air-datepicker {
    border-color: var(--color-base-300);
    border-radius: var(--radius-box, 0.5rem);
}

.air-datepicker-body--day-names {
    color: var(--color-primary);
    font-weight: 600;
}

.air-datepicker-cell:hover {
    background-color: var(--color-base-200);
}

.air-datepicker-cell.-current- {
    color: var(--color-primary);
    font-weight: 600;
}

.air-datepicker-cell.-range-from-,
.air-datepicker-cell.-range-to- {
    border: 1px solid var(--color-primary);
}

.air-datepicker-cell.-range-from-::before,
.air-datepicker-cell.-range-to-::before {
    background-color: oklch(from var(--color-primary) l c h / 10%);
}

.air-datepicker-cell.-in-range- {
    background-color: oklch(from var(--color-primary) l c h / 10%);
}

.air-datepicker-time--row input[type='range']::-webkit-slider-thumb {
    background-color: var(--color-primary);
}

.air-datepicker-time--row input[type='range']::-moz-range-thumb {
    background-color: var(--color-primary);
}

.air-datepicker-button,
.air-datepicker-button:hover {
    color: var(--color-primary);
}

.air-datepicker-button:hover {
    background-color: var(--color-base-200);
}

.air-datepicker--pointer:after {
    background: var(--color-base-100);
}