@import (once) "include/vars";
@import (once) "include/mixins";

.textarea, textarea {
    height: auto;
    padding: .5rem .75rem;
}

textarea {
    line-height: 1.2;
}

.textarea {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
    padding: 0;

    textarea {
        min-height: 4rem;
        overflow-y: hidden;
        resize: none;
        border: none!important;
        &:focus {
            box-shadow: none;
        }
    }

    .input-clear-button {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        background-color: transparent;
        &:hover {
            background-color: @light;
            text-shadow: rgba(0,0,0,.25) 0.1em 0.1em 0.2em;
        }
    }

    &.disabled {
        .clear-button {
            display: none;
        }
    }

    .prepend {order: 1}
    .append {order: 3}
    textarea {order: 2;}

    .input-clear-button ~ textarea {
        padding-right: 48px;
    }
}