textarea {
    appearance: none;
    padding: 1em;
    width: 100%;
    min-height: 150px;
    font-family: $roboto;
    font-size: 1rem;
    border-radius: 3px;
    background-color: lighten($background, 2%);
    border: 1px solid $smoke-blue;
    transition: border-color 0.3s;
    resize: none;

    @include placeholder() {
        color: $text-gray;
    }

    &.small {
        min-height: 80px;
    }

    &:focus,
    &.focused {
        outline: none;
        border-color: $soft-blue;
    }
}
