@use '../../styles/variables';

@mixin activeColor {
    color: variables.$primary;
}

.thy-date-range-container {
    display: flex;
    align-items: center;
    .thy-date-range-text {
        padding: 0 15px;
        position: relative;
        .thy-date-range-text-caret-down {
            display: inline-block;
            transform: rotate(0);
            transition: transform 0.6s;
            color: variables.$gray-700;
        }

        &.thy-date-range-text-active {
            @include activeColor();
            .thy-date-range-text-caret-down {
                @include activeColor();
                transform: rotate(180deg);
                transition: transform 0.6s;
            }
        }
        &:hover {
            cursor: variables.$hand-cursor;
            @include activeColor();
            &.thy-date-range-disabled {
                cursor: variables.$disabled-cursor;
                color: variables.$gray-800;
            }
            .thy-date-range-text-caret-down {
                @include activeColor();
            }
        }
    }
}
.thy-date-range-menu-item {
    width: 100%;
    border: none !important;
    transition: padding 200ms !important;
    &:hover {
        padding-left: 30px;
    }
    &:focus {
        outline: none;
    }
}
