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

    .form-label {
        transition: all 0.2s ease-out;
        top: 0;
        left: 0;
        @apply absolute pt-4 pl-3 cursor-text;
    }

    .form-textarea {
        @apply h-36;
        @apply w-72;
        @apply pt-6;
        @apply border-shade;

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

    .form-textarea:focus + .form-label,
    .form-textarea:active + .form-label,
    .form-textarea.filled + .form-label {
        @apply border-cta outline-none;
        @apply text-cta;
        @apply -top-2;
        @apply text-sm;
        transition: all 0.2s ease-out;
    }

    &.form-textarea-invalid {
        .form-textarea {
            @apply border-red;
            @apply text-red;

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

    &.form-textarea-valid {
        .form-textarea {
            @apply border-cta;
            @apply text-black;

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