@import "../../styles/typography";
@import "../../styles/color";
@import "../../styles/sizes";
@import "../../styles/flex";
@import "../../styles/form";

.one-ui-text-area {
    $root: &;
    position: relative;

    //height: 48px;
    height: auto;
    transition: color 0.5s;
    cursor: initial;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;


    @include setMargin();
    @include setFlex();

    &__wrapper {
          width: 100%;
          box-sizing: border-box;
          display: flex;
          flex-direction: row;
          align-items: center;
          height: auto;
    }

    textarea {
        @include inputWrapper();

        @include font("s-14", regular, "l-1.5");
        box-sizing: border-box;
        color: color(dark);
        letter-spacing: 0;
        box-shadow: none;
        outline: none;
        height: 100%;
        width: 100%;
        min-width: 100%;
        resize: none;

      &#{$root}--focus {
        border: 1px solid color(dark, 4, 1);
        background: color(white, 2, 1);
      }
      &::placeholder {
            color: color(grey, 8);
        }
    }

    &--transparent {
        textarea {
            @include transparentWrapper($root);
        }
    }

    &--size {
        $sizeNames: xsm sm md lg xl;
        $sizes: 24 32 40 48 56;
        $paddings: 4px 8px, 12px 12px, 12px 12px, 16px 16px, 16px 16px, 16 16px;
        $clearMargins: 6 8 10 10 6;

        @mixin inputSize($root, $size) {
            $i: index($sizes, $size);
            &-#{nth($sizeNames, $i)} {
                textarea {
                    min-height: #{$size}px;
                    //min-width: #{$size}px;
                    padding: #{nth($paddings, $i)};
                    padding-top: #{($size - 14 * 1.5 - 1) / 2}px;
                    padding-bottom: #{($size - 14 * 1.5 - 1) / 2}px;

                    #{$root}__before,
                    #{$root}__after {
                        min-width: $size;
                        min-height: $size;
                        //margin-right: -#{$paddingH / 2};
                    }

                    //#{$root}__clear{
                    //    width: $size - 8px;
                    //    height: $size - 8px;
                    //    max-width: 32px;
                    //    max-height: 32px;
                    //    margin-right: -#{nth($clearMargins,$i)}px;
                    //}
                }
            }
        }
        @each $size in $sizes {
            @include inputSize($root, $size);
        }
    }
}