@use "../../style/variables" as *;
@use '../../input/style/mixin' as *;

.#{$prefix}-textarea {
  @include input-default;

  padding: var(--ty-textarea-padding);
  overflow: auto;
  resize: none;

  &_disabled {
    @include input-default-disabled;
  }

  &-container {
    position: relative;
    display: inline-block;
    width: 100%;

    &_with-footer {
      .#{$prefix}-textarea {
        display: block;
        padding-bottom: var(--ty-textarea-padding-bottom-with-counter);
      }
    }

    &_with-custom-resize {
      .#{$prefix}-textarea {
        width: 100%;
        height: 100%;
        overflow: auto;
        padding-bottom: max(var(--ty-textarea-padding-bottom-with-counter), 26px);
      }
    }

    &__footer {
      position: absolute;
      bottom: 1px;
      left: var(--ty-textarea-counter-offset-inline-end);
      right: 1px;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      gap: 12px;
      pointer-events: none;
    }

    &__counter {
      font-size: 12px;
      color: color-mix(in srgb, var(--ty-textarea-counter-color) 88%, transparent);
      line-height: 1.1;
      margin-right: auto;
      white-space: nowrap;
    }

    &__resize-handle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      cursor: ns-resize;
      user-select: none;
      pointer-events: auto;
      flex: none;
      color: color-mix(in srgb, var(--ty-color-text-tertiary, #999) 92%, transparent);
      opacity: 0.82;
      transition: color 0.2s ease, opacity 0.2s ease;

      &:hover {
        color: var(--ty-color-text-secondary, #666);
        opacity: 1;
      }

      svg {
        display: block;
      }
    }
  }
}