@import './ca-input.colors.scss';
@import "theme/variables.scss";

//-------------------- Input Icon ---------------------
.input-icon {
    position: absolute;
    left: 6px;
    top: 47%;
    transform: translateY(-50%);
    z-index: 10;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: 0.3s ease-in-out;

    svg-icon {
        svg {
            width: 18px;
            height: 18px;
        }
    }

    &.datetimeclass {
        z-index: 21;
    }

    &.default-svg-color {
        svg {
            path {
                fill: $default-placeholderIcon;
            }
        }
    }

    &.cursor-pointer {
        cursor: pointer;
    }

    &::after {
        content: '';
        display: block;
        height: 15px;
        width: 1px;
        border-radius: 3px;
        background: $default-placeholderIcon-pipe;
        position: absolute;
        left: 21px;
        top: 55%;
        transform: translateY(-50%);
    }

    &.focus {
        svg {
            path {
                fill: $default-focus-placeholderIcon;
            }
        }

        text {
            fill: $default-focus-placeholderIcon;
        }

        &::after {
            background: $default-focus-placehilderIcon-pipe;
        }
    }

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

        text {
            fill: $valid-focus-placeholderIcon;
        }

        &::after {
            background: $valid-focus-placeholderIcon-pipe;
        }
    }

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

        text {
            fill: $valid-placeholderIcon;
        }

        &::after {
            background-color: $valid-placeholderIcon-pipe;
        }
    }

    &.valid-focus-out-dropdown-label {
        &::after {
            background-color: $valid-placeholderIcon-pipe;
        }
    }

    &.invalid-focus-in {
        svg {
            path {
                fill: $invalid-focus-placeholderIcon;
            }
        }

        text {
            fill: $invalid-focus-placeholderIcon;
        }

        &::after {
            background-color: $invalid-focus-placeholderIcon-pipe;
        }
    }

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

        text {
            fill: $invalid-placeholderIcon;
        }

        &::after {
            background: $invalid-placeholderIcon-pipe;
        }
    }

    &.inactive-empty {
        svg {
            path {
                fill: $inactive-empty-placeholderIcon;
            }
        }
    }

    &.inactive-filled {
        svg {
            path {
                fill: $inactive-filled-placeholderIcon;
            }
        }

        &::after {
            background-color: $inactive-filled-placeholderIcon-pipe;
        }
    }

    //------------------------- Custom class -------------------------

    &.discolor-placeholder {
        svg {
            path {
                fill: $default-placeholderIcon;
            }
        }
    }

    &.load-adjusted-rate {
        svg {
            path {
                fill: $default-placeholderIcon-yellow;
            }
        }
    }

    &.load-advance-rate {
        svg {
            path {
                fill: $default-placeholderIcon-green;
            }
        }
    }

    &.hidden {
        display: none !important;
    }
}