.atm-form-input,
.form-input-wrapper {
    @apply relative;

    .form-input {
        @apply h-12 w-72;
        font-size: 16px !important;

        &:focus {
            @apply border-black;
        }

        &[disabled] {
            @apply bg-black-100;
        }
    }

    .form-input-error-icon {
        @apply hidden;
    }

    .form-input-valid-icon {
        @apply hidden;
    }

    .form-input-prepend-icon {
        @apply absolute  inline left-3 text-black-400;
        top: calc(50% - 0.5em);
    }

    &.form-input-invalid {
        .form-input {
            @apply border-red text-red pr-10;

            &:focus {
                @apply border-red;
            }
        }

        .form-input-error-icon {
            @apply absolute inline right-3 text-red;
            top: calc(50% - 0.5em);
        }
    }

    &.form-input-valid {
        .form-input {
            @apply border-green text-green  pr-10;

            &:focus {
                @apply border-green;
            }
        }

        .form-input-valid-icon {
            @apply absolute inline right-3 text-green;

            top: calc(50% - 0.5em);
        }
    }

    &.form-input-with-icon {
        .form-input {
            @apply pl-10;
        }
    }
}