@use '../../theme/styles' as theme;

.wr-textarea {
  display: block;
  position: relative;

  // Defaults
  --wr-textarea-color: var(--wr-color-dark);
  --wr-textarea-placeholder: rgba(var(--wr-color-medium-rgb), 0.7);
  --wr-textarea-bg: var(--wr-color-white);
  --wr-textarea-border: var(--wr-color-light);
  --wr-textarea-radius: var(--wr-control-radius-md);
  --wr-textarea-ring: transparent;
  --wr-textarea-padding-y: 0.5rem;
  --wr-textarea-padding-x: var(--wr-control-padding-x-md);
  --wr-textarea-font-size: var(--wr-text-sm);
  --wr-textarea-line-height: 1.375rem;

  background: var(--wr-textarea-bg);
  color: var(--wr-textarea-color);
  border: 1px solid var(--wr-textarea-border);
  @include theme.smooth-br(var(--wr-textarea-radius));
  box-shadow: 0 0 0 3px var(--wr-textarea-ring);
  transition:
    border-color var(--wr-transition-base),
    box-shadow var(--wr-transition-base),
    background var(--wr-transition-base);

  &--focused {
    --wr-textarea-border: var(--wr-color-primary);
    --wr-textarea-ring: rgba(var(--wr-color-primary-rgb), 0.15);
  }

  &--disabled {
    --wr-textarea-color: var(--wr-color-medium);
    --wr-textarea-bg: rgba(var(--wr-color-light-rgb), 0.35);
    cursor: not-allowed;
  }

  // Horizontal resize needs a shrinkable, explicit-width box (not full-width block).
  &--resize-x {
    display: inline-block;
    max-width: 100%;
  }

  // Sizes — radius, padding, font + line-height scale; height stays content-driven.
  &--sm {
    --wr-textarea-radius: var(--wr-control-radius-sm);
    --wr-textarea-padding-y: 0.375rem;
    --wr-textarea-padding-x: var(--wr-control-padding-x-sm);
    --wr-textarea-font-size: var(--wr-text-xs);
    --wr-textarea-line-height: 1.125rem;
  }

  &--lg {
    --wr-textarea-radius: var(--wr-control-radius-lg);
    --wr-textarea-padding-y: 0.625rem;
    --wr-textarea-padding-x: var(--wr-control-padding-x-lg);
    --wr-textarea-font-size: var(--wr-text-base);
    --wr-textarea-line-height: 1.625rem;
  }

  &--no-resize &__native {
    resize: none;
  }

  &__native {
    display: block;
    width: 100%;
    appearance: none;
    background: transparent;
    border: 0;
    outline: 0;
    margin: 0;
    color: inherit;
    font-family: var(--wr-font-family-base);
    font-size: var(--wr-textarea-font-size);
    line-height: var(--wr-textarea-line-height);
    padding: calc(var(--wr-textarea-padding-y) * var(--wr-density-y, 1))
      calc(var(--wr-textarea-padding-x) * var(--wr-density-x, 1));
    // Native grip removed — we draw our own corner grip (&__resize) instead.
    resize: none;

    &::placeholder {
      color: var(--wr-textarea-placeholder);
    }

    &:disabled {
      cursor: not-allowed;
    }
  }

  // Corner resize grip — icon (move-vertical / -horizontal / -diagonal-2) and
  // cursor follow the `resize` direction.
  &__resize {
    position: absolute;
    right: 0.25rem;
    bottom: 0.25rem;
    display: inline-flex;
    color: var(--wr-color-text-faint);
    touch-action: none;
    transition: color var(--wr-transition-base);

    &--vertical {
      cursor: ns-resize;
    }
    &--horizontal {
      cursor: ew-resize;
    }
    &--both {
      cursor: nwse-resize;
    }

    .wr-icon__svg {
      width: 0.875rem;
      height: 0.875rem;
    }

    &:hover {
      color: var(--wr-color-medium);
    }
  }
}