@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;
@use "../common/var.scss" as *;

@include b(textarea) {
  @include e(wrapper) {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    color: getCssVar("color", "text-1");
    font-size: getCssVar("font-size", "medium");
    background-color: getCssVar("color", "bg-2");
    border: 1px solid getCssVar("color", "fill-3");
    cursor: text;
    transition:
      color 0.1s cubic-bezier(0, 0, 1, 1),
      border-color 0.1s cubic-bezier(0, 0, 1, 1),
      background-color 0.1s cubic-bezier(0, 0, 1, 1);
    position: relative;
    padding-right: 0;
    padding-left: 0;
    overflow: hidden;

    &:hover {
      border: 1px solid getCssVar("color", "fill-4");
    }
    &:focus-within {
      border-color: getCssVar("color", "primary-6");
    }
    @include when(disabled) {
      background-color: getCssVar("color", "fill-2");
      border-color: getCssVar("color", "fill-2");
      cursor: not-allowed;
    }
    @include when(error) {
      border-color: getCssVar("color", "danger-6");
      &:hover {
        border-color: getCssVar("color", "danger-6");
      }
      &:focus-within {
        border-color: getCssVar("color", "danger-6");
      }
      @include when(filled) {
        background-color: getCssVar("color", "error-1");
        border-color: getCssVar("color", "error-1");
        &:hover {
          background-color: getCssVar("color", "error-2");
        }
        &:focus-within {
          background-color: getCssVar("color", "bg-2");
          border-color: getCssVar("color", "error-5");
        }
      }
    }
    @include when(filled) {
      background-color: getCssVar("color", "fill-2");
      border: 1px solid getCssVar("color", "fill-2");
      &:hover {
        background-color: getCssVar("color", "fill-3");
        border: 1px solid getCssVar("color", "fill-3");
      }
      &:focus-within {
        background-color: getCssVar("color", "bg-2");
        border-color: getCssVar("color", "primary-6");
      }
    }
  }

  @include e(inner) {
    width: 100%;
    color: inherit;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    cursor: inherit;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    display: block;
    box-sizing: border-box;
    height: 100%;
    line-height: 1.5715;
    vertical-align: top;
    resize: vertical;
    color: getCssVar("color", "text-1");
    &::placeholder {
      color: getCssVar("color", "text-3");
    }
  }
  @include when(auto-size) {
    resize: none;
    overflow: hidden;
  }
  @include e(limit) {
    position: absolute;
    right: 10px;
    bottom: 6px;
    color: getCssVar("color", "text-3");
    font-size: 12px;
    user-select: none;
  }
  @include e(clear) {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    border-radius: getCssVar("radius", "circle");
    font-size: getCssVar("font-size", "medium");
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:hover {
      background-color: getCssVar("color", "fill-3");
    }
  }

  @each $size in $size-list {
    @include m(#{$size}) {
      @include be(textarea, wrapper) {
        border-radius: getCssVar("radius", $size);
      }
      @include be(textarea, inner) {
        min-height: getCssVar("size", $size);
        @if $size == "mini" {
          font-size: getCssVar("font-size", $size);
          padding: 0 8px;
        }
        @if $size == "small" {
          font-size: getCssVar("font-size", "medium");
          padding: 4px 8px;
        }
        @if $size == "medium" {
          font-size: getCssVar("font-size", "medium");
          padding: 4px 8px;
        }
        @if $size == "large" {
          font-size: getCssVar("font-size", "medium");
          padding: 4px 12px;
        }
      }
    }
  }
}