@import './ca-input.colors.scss';
//-------------------- Input Password Eye --------------------
.input-password-eye {
    transition: 0.3s ease-in-out;
    display: none;
    width: 18px;
    height: 18px;
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding-top: 0px;
    cursor: pointer;
    transition: 0.3s ease-in-out;

    svg {
        width: 18px;
        height: 18px;
        position: absolute;
        bottom: 0;
        path {
            fill: $default-password;
        }
    }

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

    &.visible {
        display: inline-block;
    }

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

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

    &.valid-focus-out {
        svg {
            path {
                fill: $valid-password;
            }
        }

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

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

    &.valid-focus-in {
        display: inline-block;

        svg {
            path {
                fill: $valid-focus-password;
            }
        }

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

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

    &.invalid-focus-out {
        svg {
            transition: 0.3s ease-in-out;
            path {
                fill: $invalid-password;
            }
        }

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

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

    &.invalid-focus-in {
        svg {
            transition: 0.3s ease-in-out;
            path {
                fill: $invalid-focus-password;
            }
        }

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

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