.#{$uiName}-textarea {
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(34,36,38,.15);
    background: white;
    @include border-radius(3px);
    box-shadow: 0 0 0 0 transparent inset;

    textarea {
        resize: none;
        padding-top: .7em;
        font-family: inherit;
    }

    &.no-border {
        border: none;

    }

    &.no-radius {
        @include border-radius(0);

        .#{$uiName}-button {
            @include border-radius-right(0);
        }
    }

    .caption-text-ui {
        height: auto;
    }

    .form-jump-ui-container {
        align-items: flex-start;
        padding-top: .8em;
    }

    .form-ui {
        align-self: stretch;
    }

    &.focus {
        border-color: #85b7d9;
        box-shadow: 0 0 0 0 rgba(34,36,38,.35) inset;

        .icon-ui {
            color: rgba(0,0,0,.87);
        }
    }

    &.error {
        background: lighten(red, 47%);
        border-color: red;

        .error-message-ui {
            display: block;
        }
    }

    &.disabled {
        pointer-events: none;
        cursor: default;
        position: relative;

        &:after {
            content: '';
            background: rgba(0,0,0,.035);
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }

    &.readonly {
        pointer-events: none;
        cursor: default;
        position: relative;

        &:after {
            content: '';
            background: rgba(255,255,255,.2);
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }

    /*&.huge-ui {
        height: 300px;
        font-size:  map-get($huge-size, 'font');

        textarea {
            &.jump-ui {
                @extend .input-extend-css;
                font-size: 1em;
                padding: 0 10px;
            }
        }

        .caption-text-ui {
            font-size: 1em;
            padding: 0 10px;
            padding-top: .8em;

            &.data-active {
                padding-top: 4px;
                font-size: .7em;
            }
        }

        .label-ui {
            font-size: .8em;
        }

    }*/

    &.large-ui {
        // height: map-get($large-size, 'height');
        height: 200px;
        font-size:  map-get($large-size, 'font');

        textarea {
            &.jump-ui {
                @extend .input-extend-css;
                font-size: 1em;
                padding: 0 10px;
            }
        }

        .caption-text-ui {
            font-size: 1em;
            padding: 0 10px;
            padding-top: .8em;

            &.data-active {
                padding-top: 4px;
                font-size: .7em;
            }
        }

        .label-ui {
            font-size: .8em;
        }
    }

    &.default-ui {
        // height: map-get($big-size, 'height');
        height: 150px;
        font-size:  map-get($default-size, 'font');

        textarea {
            &.jump-ui {
                @extend .input-extend-css;
                font-size: 1em;
                padding: 0 10px;
            }
        }

        .caption-text-ui {
            font-size: 1em;
            padding: 0 10px;
            padding-top: .8em;

            &.data-active {
                padding-top: 4px;
                font-size: .7em;
            }
        }

        .label-ui {
            font-size: .8em;
        }
    }

    &.medium-ui {
        // height: map-get($medium-size, 'height');
        height: 100px;
        font-size:  map-get($medium-size, 'font');

        textarea {
            &.jump-ui {
                @extend .input-extend-css;
                font-size: 1em;
                padding: 0 10px;
            }
        }

        .caption-text-ui {
            font-size: 1em;
            padding: 0 10px;
            padding-top: .8em;

            &.data-active {
                padding-top: 4px;
                font-size: .7em;
            }
        }

        .label-ui {
            font-size: .8em;
        }
    }

    &.small-ui {
        // height: map-get($small-size, 'height');
        height: 75px;
        font-size:  map-get($small-size, 'font');

        textarea {
            &.jump-ui {
                @extend .input-extend-css;
                font-size: 1em;
                padding: 0 10px;
            }
        }

        .caption-text-ui {
            font-size: 1em;
            padding: 0 10px;
            padding-top: .8em;

            &.data-active {
                padding-top: 4px;
                font-size: .7em;
            }
        }

        .label-ui {
            font-size: .8em;
        }
    }

    &.tiny-ui {
        height: map-get($tiny-size, 'height');
        font-size:  map-get($tiny-size, 'font');

        .form-jump-ui-container {
            padding-top: .5em;
        }

        textarea {
            &.jump-ui {
                @extend .input-extend-css;
                font-size: 1em;
                padding: 0 10px;
            }
        }

        .caption-text-ui {
            font-size: 1em;
            padding: 0 10px;
            display: none;

            &.data-active {
                padding-top: 4px;
                font-size: .7em;
            }
        }

        .label-ui {
            font-size: .9em;
        }
    }
}