@import "shared/mixins-and-vars";

@line-height: 22;

textarea,
[role="textbox"] {
    @font-size: 16;

    display: inline-block;
    width: 200px;
    font-size: (@font-size / @px);
    line-height: (@line-height / @font-size);
    border: solid 1px black;
    background: #fff;
    vertical-align: bottom;
    padding: 10px;

    .enable__is-dark-mode & {
        background-color: @dark-mode-black;
        border-color: @dark-mode-white;
        color: @dark-mode-white;
    }
}

textarea,
[aria-multiline="true"] {
    min-height: (6 * @line-height / @px);
    overflow: auto;
    .vendor(appearance, textarea);
    resize: both;

    @media @desktop {
        min-width: 20rem;
    }
}

.textarea-label {
    vertical-align: top;
}

[role="group"],
fieldset {
    div {
        margin-bottom: 10px;
    }
}

.enable-character-count {
    display: block;

    margin-left: 45%;
    text-align: right;
    margin-top: 5px;

    @media @tablet-up {
        width: 20rem;
    }
}