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

//
// Native input styled by `[wrInput]` directive.
// Used standalone OR wrapped in `<wr-input-group>` (group strips this
// border so the visuals belong to the group instead).
//
.wr-input {
  --wr-input-color: var(--wr-color-dark);
  --wr-input-placeholder: rgba(var(--wr-color-medium-rgb), 0.7);
  --wr-input-bg: var(--wr-color-white);
  --wr-input-border: var(--wr-color-light);
  --wr-input-radius: var(--wr-control-radius-md);
  --wr-input-ring: transparent;
  --wr-input-padding-y: var(--wr-control-padding-y-md);
  --wr-input-padding-x: var(--wr-control-padding-x-md);
  --wr-input-font-size: var(--wr-control-font-size-md);
  --wr-input-line-height: var(--wr-control-line-height-md);

  display: inline-block;
  width: 100%;
  min-width: 0;
  appearance: none;
  background: var(--wr-input-bg);
  color: var(--wr-input-color);
  border: 1px solid var(--wr-input-border);
  @include theme.smooth-br(var(--wr-input-radius));
  box-shadow: 0 0 0 3px var(--wr-input-ring);
  outline: 0;
  margin: 0;
  padding: calc(var(--wr-input-padding-y) * var(--wr-density-y, 1))
    calc(var(--wr-input-padding-x) * var(--wr-density-x, 1));
  font-family: var(--wr-font-family-base);
  font-size: var(--wr-input-font-size);
  line-height: var(--wr-input-line-height);
  transition:
    border-color var(--wr-transition-base),
    box-shadow var(--wr-transition-base),
    background var(--wr-transition-base);

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

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

  &:disabled,
  &[readonly] {
    --wr-input-color: var(--wr-color-medium);
    --wr-input-bg: rgba(var(--wr-color-light-rgb), 0.35);
  }

  &:disabled {
    cursor: not-allowed;
  }

  // Sizes — share the `--wr-control-*` contract (22 / 30 / 36 px). Declared
  // before `--rounded` so the pill modifier's radius / padding-x still win
  // when both classes are present.
  &--sm {
    --wr-input-radius: var(--wr-control-radius-sm);
    --wr-input-padding-y: var(--wr-control-padding-y-sm);
    --wr-input-padding-x: var(--wr-control-padding-x-sm);
    --wr-input-font-size: var(--wr-control-font-size-sm);
    --wr-input-line-height: var(--wr-control-line-height-sm);
  }

  &--lg {
    --wr-input-radius: var(--wr-control-radius-lg);
    --wr-input-padding-y: var(--wr-control-padding-y-lg);
    --wr-input-padding-x: var(--wr-control-padding-x-lg);
    --wr-input-font-size: var(--wr-control-font-size-lg);
    --wr-input-line-height: var(--wr-control-line-height-lg);
  }

  &--rounded {
    --wr-input-radius: var(--wr-border-radius-pill);
    --wr-input-padding-x: 1rem;
    corner-shape: round; // override squircle from smooth-br for pills
  }
}

//
// Group wrapper — owns the border and focus ring when present, so the
// inner `[wrInput]` can drop its own border and visually merge with
// `[wrInputPrefix]` / `[wrInputSuffix]` / `<wr-password-toggle>` siblings.
//
.wr-input-group {
  --wr-input-group-radius: var(--wr-control-radius-md);
  --wr-input-group-bg: var(--wr-color-white);
  --wr-input-group-border: var(--wr-color-light);
  --wr-input-group-ring: transparent;
  --wr-input-group-affix: var(--wr-color-medium);
  --wr-input-group-padding-x: 0.75rem;

  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  background: var(--wr-input-group-bg);
  border: 1px solid var(--wr-input-group-border);
  @include theme.smooth-br(var(--wr-input-group-radius));
  box-shadow: 0 0 0 3px var(--wr-input-group-ring);
  transition:
    border-color var(--wr-transition-base),
    box-shadow var(--wr-transition-base),
    background var(--wr-transition-base);

  &:focus-within {
    --wr-input-group-border: var(--wr-color-primary);
    --wr-input-group-ring: rgba(var(--wr-color-primary-rgb), 0.15);
  }

  &--rounded {
    --wr-input-group-radius: var(--wr-border-radius-pill);
    --wr-input-group-padding-x: 1rem;
    corner-shape: round; // override squircle from smooth-br for pills
  }

  // Native input inside a group loses its own chrome.
  .wr-input {
    border: 0;
    background: transparent;
    box-shadow: none;

    &:focus {
      --wr-input-border: transparent;
      --wr-input-ring: transparent;
    }
  }

  &__affix {
    display: inline-flex;
    align-items: center;
    color: var(--wr-input-group-affix);
    padding: 0 var(--wr-input-group-padding-x);
    user-select: none;
    font-weight: 500;
    font-family: var(--wr-font-family-base);
    font-size: var(--wr-text-sm);
    line-height: 1.25rem;
  }

  // Decorative affixes (`<span wrInputSuffix>USD</span>`) should let clicks
  // fall through to the input. Interactive affixes (`<button>`) keep their
  // own pointer behaviour — applies to date / date-time picker triggers.
  &__affix:not(button) {
    pointer-events: none;
  }

  &__affix--prefix + .wr-input {
    padding-left: 0.25rem;
  }

  .wr-input:has(+ &__affix--suffix),
  .wr-input:has(+ wr-password-toggle) {
    padding-right: 0.25rem;
  }

  &__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0 var(--wr-input-group-padding-x);
    color: var(--wr-input-group-affix);
    cursor: pointer;
    transition: color var(--wr-transition-base);

    --wr-icon-size: 1rem;

    &:hover:not(:disabled) {
      color: var(--wr-color-primary);
    }

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