@charset 'utf-8';

/*  ========================================================================
    JUICE -> ELEMENTS -> FORM -> CUSTOM -> PASSWORD
    ========================================================================  */

// Check if the elements with custom password should be imported
@if $import-elements and $import-element-custom-password {
    .custom-password {
        // Nested selectors
        input[type=password] {
            // Pseudo elements
            &::-ms-reveal {
                display: none;
            }
        }

        .custom-password__icon {
            // Pseudo classes
            &:first-child {
                display: flex;
            }

            &:last-child {
                display: none;
            }
        }

        // Modifiers: State hooks
        &.is-active {
            // Nested selectors
            .custom-password__icon {
                // Pseudo classes
                &:first-child {
                    display: none;
                }

                &:last-child {
                    display: flex;
                }
            }
        }
    }
}