@use '../core/styles/common/tokens' as *;
@use './textarea-tokens' as *;

.kbq-textarea {
    display: inline-block;

    background: transparent;
    margin: 0;
    border: none;
    outline: none;

    resize: none;
    overflow: auto;

    width: 100%;

    box-sizing: border-box;

    padding: var(--kbq-textarea-size-padding-vertical) var(--kbq-textarea-size-padding-horizontal);

    -webkit-appearance: none; // Chrome textarea height sizing fix
    vertical-align: bottom; // Chrome textarea height sizing fix

    &:not(.kbq-textarea-resizable) {
        box-sizing: border-box;
        overflow-y: hidden;
    }

    &.kbq-textarea-resizable {
        resize: vertical;
        min-height: var(--kbq-textarea-size-min-height);

        &::-webkit-resizer {
            background: var(--kbq-textarea-resizer-icon) center no-repeat;
        }
    }

    &.kbq-textarea_max-row-limit-reached {
        resize: unset;
    }
}

/* remove default red border for HTML5 validation invalid fields in Firefox */
.kbq-textarea:invalid {
    box-shadow: unset;
}