//
// _daterange.scss
//

@use "../variables" as *;
@use "../utils/mixins" as *;

.daterangepicker {
    font-family: $font-family-base;
    border: 1px solid $border-color;
    box-shadow: $box-shadow;
    background-color: $white;

    .calendar-table {
        border: 1px solid $white;
        background-color: $white;

        td,
        th {
            color: $gray-600;
        }

        .next,
        .prev {
            span {
                border-color: $body-color;
            }
        }
    }

    .ranges {
        li {
            &:hover {
                background-color: $light;
            }
            &.active {
                background-color: $primary;
            }
        }
    }

    td {
        &.in-range {
            background: $gray-100;
            color: $body-color;
        }
        &.off,
        &.off.end-date,
        &.off.in-range,
        &.off.start-date {
            background-color: $white;
            color: $body-color;
            opacity: 0.5;
        }

        &.active,
        &.active:hover {
            background-color: $primary;
            color: $white;
        }
    }

    td.available:hover,
    th.available:hover,
    td.active,
    td.active:hover {
        background-color: $primary;
        color: $white;

        span {
            border-color: $white;
        }
    }

    &:after {
        border-bottom: 6px solid $white;
    }
    &:before {
        border-bottom: 7px solid $border-color;
    }

    .drp-buttons {
        border-top: 1px solid $border-color;
    }

    select {
        &.ampmselect,
        &.hourselect,
        &.minuteselect,
        &.secondselect {
            background: $gray-100;
            border: 1px solid $gray-100;
            color: $body-color;
        }
    }

    &.show-ranges {
        .drp-calendar.left {
            border-left: 1px solid $border-color !important;
        }
    }
}