.atm-form-input {
    @apply relative;
    @apply inline-block;

    .form-label {
        transition: all 0.2s ease-out;
        transform: translateY(-50%);
        @apply absolute cursor-text top-[50%] left-4;
        @apply border-none pointer-events-none;
    }

    .form-input {
        @apply h-12;
        @apply w-full md:w-72;
        @apply border-shade;
        transition: border 0.2s ease-in-out;

        &[disabled] {
            @apply bg-shade;
        }

        &::-ms-clear {
            display: none;
            width: 0;
            height: 0;
        }

        &::-ms-reveal {
            display: none;
            width: 0;
            height: 0;
        }

        &::-webkit-search-decoration,
        &::-webkit-search-cancel-button,
        &::-webkit-search-results-button,
        &::-webkit-search-results-decoration {
            display: none;
        }

        &:focus{
            --tw-ring-color: none;
        }
    }

    .form-input:focus + .form-label,
    .form-input:active + .form-label,
    .form-input.filled + .form-label {
        @apply hidden;
    }

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

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

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

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

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

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

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

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

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

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

        .form-label {
            @apply left-10;
        }
    }
}

#mol-header-search {
    .form-input:focus + .form-label,
    .form-input:active + .form-label,
    .form-input.filled + .form-label {
        @apply hidden;
    }
}