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

.wr-tree {
  --wr-tree-indent: 1.25rem;

  display: block;
  font-family: var(--wr-font-family-base);
  font-size: var(--wr-text-sm);
  color: var(--wr-color-dark);

  &__list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
  }

  &__row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.5rem;
    padding-left: calc(0.5rem + var(--wr-tree-depth, 0) * var(--wr-tree-indent));
    border-radius: var(--wr-border-radius-sm);
    cursor: pointer;
    user-select: none;
    outline: 0;
    transition:
      background var(--wr-transition-base),
      color var(--wr-transition-base);

    &:hover:not(.wr-tree__row--disabled) {
      background: var(--wr-color-hover);
    }

    &--selected {
      background: var(--wr-color-primary-soft);
      color: var(--wr-color-primary);
    }

    // Visible ring only when the row truly has keyboard focus — not
    // just because it's the roving-tabindex cursor row.
    &:focus-visible {
      @include theme.focus-ring;
    }

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

  &__toggle {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wr-color-medium);
    cursor: pointer;
    border-radius: var(--wr-border-radius-sm);
    transition: transform var(--wr-transition-base);

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

    &--leaf {
      visibility: hidden;
    }
  }

  &__row[aria-expanded='true'] &__toggle {
    transform: rotate(90deg);
  }

  &__label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &--disabled {
    opacity: 0.7;
    pointer-events: none;
  }

  //
  // Combobox-mode chrome — trigger button + chips + chevron.
  // Activated by [openOn]="overlay" (replaces the deprecated
  // standalone wr-tree-select entry-point).
  //

  &--combobox {
    --wr-tree-trigger-color: var(--wr-color-dark);
    --wr-tree-trigger-bg: var(--wr-color-white);
    --wr-tree-trigger-border: var(--wr-color-light);
    // Combobox trigger on the md control contract (30px, radius 6) so it lines
    // up with select / input / button when used as a tree-select.
    --wr-tree-trigger-radius: var(--wr-control-radius-md);
    --wr-tree-trigger-padding-y: var(--wr-control-padding-y-md);
    --wr-tree-trigger-padding-x: var(--wr-control-padding-x-md);
    --wr-tree-trigger-font-size: var(--wr-control-font-size-md);
    --wr-tree-trigger-line-height: var(--wr-control-line-height-md);
    --wr-tree-panel-max-height: 18rem;

    display: inline-flex;
    vertical-align: middle;

    &.wr-tree--disabled {
      --wr-tree-trigger-color: var(--wr-color-medium);
      --wr-tree-trigger-bg: rgba(var(--wr-color-light-rgb), 0.35);
    }
  }

  &__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 12rem;
    appearance: none;
    background: var(--wr-tree-trigger-bg);
    color: var(--wr-tree-trigger-color);
    border: 1px solid var(--wr-tree-trigger-border);
    border-radius: var(--wr-tree-trigger-radius);
    padding: var(--wr-tree-trigger-padding-y) var(--wr-tree-trigger-padding-x);
    font-family: var(--wr-font-family-base);
    font-size: var(--wr-tree-trigger-font-size);
    line-height: var(--wr-tree-trigger-line-height);
    cursor: pointer;
    text-align: left;
    transition:
      border-color var(--wr-transition-base),
      box-shadow var(--wr-transition-base);

    &:focus-visible {
      border-color: var(--wr-color-primary);
      @include theme.focus-ring;
    }

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

  &--open &__trigger {
    border-color: var(--wr-color-primary);
    box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
  }

  &__value,
  &__placeholder {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__placeholder {
    color: var(--wr-color-text-muted);
  }

  &__chevron {
    --wr-icon-size: 1rem;
    flex: 0 0 auto;
    color: var(--wr-color-medium);
    transition: transform var(--wr-transition-base);
  }

  &--open &__chevron {
    transform: rotate(180deg);
  }

  &__clear {
    --wr-icon-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 999px;
    color: var(--wr-color-medium);
    cursor: pointer;
    transition:
      background 0.12s ease,
      color 0.12s ease;

    &:hover {
      background: rgba(var(--wr-color-dark-rgb), 0.06);
      color: var(--wr-color-dark);
    }
  }

  // Multi-mode trigger chrome — chip layout.

  &--multi &__trigger {
    flex-wrap: wrap;
    align-items: center;
    padding: 0.25rem 0.5rem;
    // Empty / one-row floor = single-mode height (+2px for the border).
    min-height: calc(var(--wr-tree-trigger-line-height) + var(--wr-tree-trigger-padding-y) * 2 + 2px);
  }

  &__chips {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
  }

  &__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    max-width: 100%;
    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--wr-color-primary-soft);
    color: var(--wr-color-primary);
    font-size: var(--wr-text-sm);
    line-height: 1.4;
    user-select: none;
  }

  &__chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__chip-remove {
    --wr-icon-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s ease;

    &:hover {
      background: var(--wr-color-primary-active);
    }
  }

  &__chip--more {
    background: rgba(var(--wr-color-dark-rgb), 0.08);
    color: rgba(var(--wr-color-dark-rgb), 0.7);
  }
}

.wr-tree-overlay {
  padding-top: 0.25rem;
}

.wr-tree-panel {
  background: var(--wr-color-white);
  border: 1px solid var(--wr-color-light);
  border-radius: var(--wr-border-radius-base);
  box-shadow: var(--wr-shadow-overlay);
  padding: 0.375rem;
  max-height: var(--wr-tree-panel-max-height, 18rem);
  overflow-y: auto;
}

// Touch pointers: taller rows (~44px) and a larger expand/collapse toggle so
// both the row and its toggle are comfortable tap targets. Fine pointers keep
// the compact desktop rows above.
@media (pointer: coarse) {
  .wr-tree__row {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .wr-tree__toggle {
    width: 1.75rem;
    height: 1.75rem;
  }
}