@use 'variables' as *;
@use '../xui';

@mixin theme() {
  xui-textarea {
    display: flex;
    flex-direction: column;
  }

  .x-textarea {
    display: flex;
    position: relative;

    @include xui.border-radius($border-radius);
    @include xui.focusable();

    textarea {
      width: 100%;
      height: auto;
      resize: none;
      padding: 12px 32px 12px 12px;

      border: none;
      outline: none;

      @include xui.border-radius($border-radius);
      @include xui.typography-level(body-1);
      @include xui.scrollbar-regular();
    }

    &-light textarea {
      @include xui.fill(secondary);
    }

    &-dark textarea {
      @include xui.fill(tertiary);
    }

    &-disabled {
      @include xui.disabled();

      textarea {
        cursor: not-allowed;
      }
    }

    &-word-counter {
      position: absolute;
      bottom: 4px;
      right: 16px;

      @include xui.typography-level(caption);
    }

    &-error {
      outline: 2px solid var(--color-error-default);
    }

    &-error-text {
      color: var(--color-error-default);
      font-size: 0.8rem;
      margin-top: 4px;
      margin-left: 8px;
    }
  }
}