@import './ca-input.colors.scss';
@import "theme/variables.scss";
//-------------------- Input Dropdown arrow -----------------
.input-dropdown-arrow {
    display: inline-block;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    line-height: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 10;
    cursor: pointer;

    svg {
        display: flex;
        width: 100%;
        transform: rotate(0deg);
        transition: 0.3s ease-in-out;
        path {
            fill: $default-arrow;
        }
    }

    &:hover {
        svg {
            path {
                fill: $default-on-arrow-hover;
            }
        }
    }

    &.datetimeclass {
        z-index: 22 !important;
    }

    &.focus {
        svg {
            transform: rotate(180deg);
            transition: 0.3s ease-in-out;
            path {
                fill: $default-focus-arrow;
            }
        }

        &:hover {
            svg {
                path {
                    fill: $default-focus-on-arrow-hover;
                }
            }
        }
    }

    &.invalid-focus-out {
        svg {
            path {
                fill: $invalid-arrow;
            }
        }

        &:hover {
            svg {
                path {
                    fill: $invalid-on-arrow-hover;
                }
            }
        }
    }

    &.invalid-focus-in,
    &.invalid-search-in-dropdown-focus-in {
        svg {
            path {
                fill: $invalid-focus-arrow;
            }
        }

        &:hover {
            svg {
                path {
                    fill: $invalid-focus-on-arrow-hover;
                }
            }
        }
    }

    &.valid-focus-in {
        svg {
            path {
                fill: $valid-focus-arrow;
            }
        }

        &:hover {
            svg {
                path {
                    fill: $valid-focus-on-arrow-hover;
                }
            }
        }
    }

    &.valid-focus-out {
        svg {
            path {
                fill: $ta-blue-13;
            }
        }

        &:hover {
            svg {
                path {
                    fill: $valid-on-arrow-hover;
                }
            }
        }
    }
}