label.textarea {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column-reverse;
    background-color: white;
    border: solid 1px var(--color-grey);
    border-radius: var(--border-radius-input);
    padding: 6px 8px;
    cursor: text;
    transition: .2s;

    span {
        color: var(--color-primary);
        font-size: var(--font-size-label);
        padding: 2px 0 0 2px;
    }

    span:after {
        content: ":";
    }

    textarea {
        font-family: var(--font-family), serif;
        font-weight: var(--font-weight-normal);
        font-size: var(--font-size-text);
        color: var(--color-text);
        padding: 1px 2px;
        border: none;
        outline: none;
        resize: none;
    }
}

label.textarea:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--color-primary) 0 0 5px 0;
}

label.textarea.disabled {
    background-color: var(--color-grey);
    cursor: not-allowed;

    textarea:disabled {
        background-color: var(--color-grey);
    }
}