.textareafield {
    display: flex;
    flex-direction: column;
    gap: var(--size-50);
    width: fit-content;
    position: relative;
    width: 100%;
    min-width: 220px;

    &[disabled] {
        pointer-events: none;
        textarea {
            background-color: var(--background-neutral-disabled);
            color: var(--foreground-neutral-disabled);
            border: 1px solid var(--background-neutral-disabled);
        }
        label {
            background-color: var(--background-neutral-disabled);
            color: var(--foreground-neutral-disabled);
        }
    }

    textarea {
        min-height: 88px;
        width: 100%;
        resize: none;
        border: 1px solid var(--border-neutral);
        display: flex;
        align-items: flex-start;
        border-radius: 4px;
        font-size: 16px;
        color: var(--foreground-neutral);
        padding: var(--size-150) var(--size-500) 0px var(--size-150);
        background-color: var(--background-neutral-container);
        box-sizing: border-box;
        font-family: var(--font-body);
        &:focus-visible {
            box-shadow: var(--focus);
            outline: none;
        }
    }

    textarea::placeholder {
        color: transparent;
    }

    textarea:focus::placeholder {
        color: var(--foreground-neutral-placeholder);
        font-size: 16px;
    }

    label {
        position: absolute;
        left: 8px;
        font-size: 16px;
        color: var(--foreground-neutral);
        top: 14px;
        line-height: 16px;
        pointer-events: none;
        background-color: var(--background-neutral-container);
        padding: 0 4px;
        // transition: 250ms ease 0s;
    }

    textarea:not(:placeholder-shown) ~ label,
    textarea:focus ~ label {
        top: -6px;
        // transition: 250ms ease 0s;
        font-size: 14px;
        line-height: 14px;
        color: var(--foreground-neutral);
    }
}