@use 'sass:color';
@use '../../variables' as *;

$b: '.date-input';

#{$b} {
    position: relative;

    &__input {
        width: 100%;

        &.input {
            padding-left: $input-padding-x + $date-input-icon-size + 4px * 2;
        }

        &.input_small {
            padding-left: $input-small-padding-x + $date-input-small-icon-size + 4px * 2;
        }
    }

    &__icon {
        fill: $date-input-icon-color;
        height: $date-input-icon-size;
        left: $input-padding-x;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        transition-duration: var(--duration-micro-s);
        transition-property: fill;
        transition-timing-function: var(--easing-standard);
        width: $date-input-icon-size;

        #{$b}__input:disabled ~ & {
            fill: $date-input-disabled-icon-color;
        }

        .input_small ~ & {
            height: $date-input-small-icon-size;
            left: $input-small-padding-x;
            width: $date-input-small-icon-size;
        }
    }

    &__solid {
        &_bg {
            background-color: $date-input-solid-bg !important;
        }

        &_color {
            color: $date-input-solid-color !important;
        }
    }

    &__light {
        &_bg {
            background-color: $date-input-light-bg !important;
        }

        &_color {
            color: $date-input-light-color !important;
        }
    }

    &__outline {
        &_bg {
            background-color: $date-input-outline-bg !important;
            border-color: $date-input-outline-border-color !important;
        }

        &_color {
            color: $date-input-outline-color !important;
        }
    }

    .vc-container {
        background-color: $date-input-bg;
        border: none;
        border-radius: $date-input-radius;
        box-shadow: $date-input-shadow !important;

        .is-dark-mode & {
            @include dark-border($width: 1px);
        }

        .vc-container {
            border: none !important;
            box-shadow: none !important;
        }
    }

    .vc-arrow {
        color: $date-input-arrow-color;

        &:hover,
        &:focus {
            background-color: $date-input-arrow-active-bg;
        }
    }

    .vc-title {
        color: $date-input-title-color !important;
    }

    .vc-weekday {
        color: $date-input-weekday-color !important;
    }

    .vc-day-content {
        color: $date-input-color;

        &:hover,
        &:focus {
            background-color: color.change($date-input-solid-bg, $alpha: 0.1) !important;
        }

        &.is-disabled {
            color: $date-input-disabled-color !important;

            &:hover,
            &:focus {
                background-color: transparent !important;
                cursor: default !important;
            }
        }
    }
}