@import '../../../styles/_partials/index';

.PasswordToggle {
    position: relative;

    input.PasswordToggleInput {
        @include flywheelInput;
        padding-right: 40px !important;

        &.__Checkbox {
            padding-right: 170px !important; 
        }
    }

    // note: remains a lowercase modifier name because this is set via a dynamic JS variable (e.g. this.state.inputType)
    &.PasswordToggle__text {
        .Eye {
            svg path {
                fill: $green;
            }

            &:hover svg path {
                @include __theme-fill($gray, $gray25);
            }
        }
    }

    .InputPasswordToggle__Checkbox {
        height: 37px;
        position: absolute;
        display: flex;
        align-items: center;
        top: 10px;
        right: 13px;
        @include theme-border-left;
        padding-left: 20px;
    }

    .Eye {
        $height: 20px;
        @include cursorPointer;
        position: absolute;
        top: 19px;
        right: 13px;

        svg {
            width: $height;
            height: $height;

            path {
                @include __theme-fill($gray, $gray25);
                transition: fill .1s ease 0ms;
            }
        }

        &:hover {
            svg path {
                fill: $green;
            }
        }
    }

    .InputPasswordToggle__InvalidMessage {
		display: block;
		margin-top: 10px;
		@include theme-color-red-dark50-else-red;
	}
}