@use 'styles/functions';
@use 'styles/mixins';
@use 'styles/transitions';
@use '../_internal/affordance';

// Shared trigger shape for Singleselect / SingleselectAsync / (later) Multiselect.
// Public CSS API lives under `--sc-kit--select--trigger--*` so consumers can override
// once and have all select variants pick it up.
@mixin select-trigger($chevron: true) {
  --_sel--height: var(--sc-kit--select--trigger--height, var(--_sel--size-height, var(--sc-kit--field--height--md)));
  --_sel--padding-inline: var(--sc-kit--select--trigger--padding-inline, var(--_sel--size-padding-inline, var(--sc-kit--field--padding-inline--md)));
  --_sel--gap: var(--sc-kit--select--trigger--gap, var(--sc-kit--space--2));
  --_sel--background: var(--sc-kit--select--trigger--background, var(--sc-kit--color--bg--field));
  --_sel--background-disabled: var(--sc-kit--select--trigger--background--disabled, var(--sc-kit--color--bg--field-alt));
  --_sel--border-color: var(--sc-kit--select--trigger--border-color, var(--sc-kit--color--border--field));
  --_sel--border-color-hover: var(--sc-kit--select--trigger--border-color--hover, var(--sc-kit--color--border--strong));
  --_sel--border-color-error: var(--sc-kit--select--trigger--border-color--error, var(--sc-kit--color--danger));
  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--_sel--size-border-radius, var(--sc-kit--field--border-radius--md)));
  --_sel--underline-color: var(--sc-kit--select--trigger--underline-color, transparent);
  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--_sel--size-font-size, var(--sc-kit--font-size--md)));
  --_sel--line-height: var(--sc-kit--select--trigger--line-height, var(--_sel--size-line-height, var(--sc-kit--line-height--control--md)));
  --_sel--color: var(--sc-kit--select--trigger--color, var(--sc-kit--color--text--primary));
  --_sel--placeholder-color: var(--sc-kit--select--trigger--placeholder--color, var(--sc-kit--color--text--placeholder));
  --_sel--icon-color: var(--sc-kit--select--trigger--icon--color, var(--sc-kit--color--text--muted));
  --_sel--icon-size: var(--sc-kit--select--trigger--icon--size, var(--_sel--size-icon-size, var(--sc-kit--field--icon--size--md)));

  @include affordance.host;

  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: var(--_sel--height);
  padding: 0 var(--_sel--padding-inline);
  background: var(--_sel--background);
  border: 1px solid var(--_sel--border-color);
  border-radius: var(--_sel--border-radius);
  color: var(--_sel--color);
  font-size: var(--_sel--font-size);
  line-height: var(--_sel--line-height);
  cursor: pointer;
  // prevents hairline anti-aliasing
  box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_sel--underline-color);
  @include transitions.transition(background-color border-color color box-shadow);

  &--sm {
    --_sel--size-height: var(--sc-kit--field--height--sm);
    --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
    --_sel--size-font-size: var(--sc-kit--font-size--sm);
    --_sel--size-line-height: var(--sc-kit--line-height--control--sm);
    --_sel--size-icon-size: var(--sc-kit--field--icon--size--sm);
    --_sel--size-border-radius: var(--sc-kit--field--border-radius--sm);
  }
  &--md {
    --_sel--size-height: var(--sc-kit--field--height--md);
    --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--md);
    --_sel--size-font-size: var(--sc-kit--font-size--md);
    --_sel--size-line-height: var(--sc-kit--line-height--control--md);
    --_sel--size-icon-size: var(--sc-kit--field--icon--size--md);
    --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
  }
  &--lg {
    --_sel--size-height: var(--sc-kit--field--height--lg);
    --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
    --_sel--size-font-size: var(--sc-kit--font-size--lg);
    --_sel--size-line-height: var(--sc-kit--line-height--control--lg);
    --_sel--size-icon-size: var(--sc-kit--field--icon--size--lg);
    --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
  }

  &:where(:hover:not(:focus-within)) {
    --sc-kit--select--trigger--border-color: var(--_sel--border-color-hover);
  }
  &:where(:focus-within),
  &--open {
    --sc-kit--select--trigger--underline-color: var(--sc-kit--color--accent);
  }
  // Popover portals focus away — :focus-within won't suppress the hover border while open.
  // --error must stay after this block: it wins border-color by source order even while open.
  &--open {
    --sc-kit--select--trigger--border-color: unset;
  }

  &--error {
    --sc-kit--select--trigger--border-color: var(--_sel--border-color-error);
    --sc-kit--select--trigger--underline-color: var(--sc-kit--color--danger);
  }

  &--disabled,
  &--readonly,
  &--inert {
    --sc-kit--select--trigger--border-color: unset;
    --sc-kit--select--trigger--underline-color: unset;
    @include affordance.suppress;
    cursor: default;
  }

  &--disabled {
    --sc-kit--select--trigger--background: var(--_sel--background-disabled);
    --sc-kit--select--trigger--color: var(--sc-kit--color--text--muted);
  }

  &--borderless {
    --sc-kit--select--trigger--background: transparent;
    --sc-kit--select--trigger--border-color: transparent;
    --sc-kit--select--trigger--underline-color: transparent;
    box-shadow: none;
  }

  &__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: inherit;

    &::placeholder {
      color: var(--_sel--placeholder-color);
    }

    &:not([readonly]) {
      cursor: text;
    }

    // Keeps flex-grow so the trailing chevron stays pinned right when a selectionSnippet replaces the input.
    &--hidden {
      opacity: 0;
      width: 0;
      flex: 1 1 0;
    }

    &--no-search {
      caret-color: transparent;
      cursor: pointer;
    }
  }

  &__selection {
    flex: 0 1 auto;
    min-width: 0;
    @include mixins.ellipsis;
  }

  &__icon {
    --sc-kit--icon--color: var(--_sel--icon-color);
    --sc-kit--icon--size: var(--_sel--icon-size);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;

    &--leading {
      margin-inline-end: var(--_sel--gap);
    }

    &--trailing {
      margin-inline-start: var(--_sel--gap);
    }
  }

  @if $chevron {
    &__chevron {
      transition: transform var(--sc-kit--duration--fast) var(--sc-kit--ease--default);
    }

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

  &__spinner {
    color: var(--_sel--icon-color);
  }

  // Multi-line wrap mode. Trigger grows under the chip cluster; min-height keeps the
  // single-line cadence when there are no chips. Padding-block becomes a small gap so
  // wrapped chip rows breathe without touching the border. Reserve right-side space for
  // the absolutely-positioned chevron / spinner.
  &--multi {
    height: auto;
    min-height: var(--_sel--height);
    flex-wrap: wrap;
    padding-block: #{functions.to-rem(4)};
    padding-inline-end: calc(var(--_sel--padding-inline) + var(--_sel--icon-size) + var(--_sel--gap));
    gap: var(--sc-kit--space--1);
  }

  // Pin chevron to the top-right corner when wrapping — must stay anchored as chips
  // reflow to additional rows below. (Spinner positioning lives in MultiselectAsync's
  // local style block — Svelte's per-component CSS-usage check otherwise flags this rule
  // as unused in Singleselect / sync Multiselect.)
  @if $chevron {
    &--multi &__chevron {
      position: absolute;
      inset-block-start: calc(var(--_sel--height) / 2);
      inset-inline-end: var(--_sel--padding-inline);
      transform: translateY(-50%);
      margin: 0;
    }
  }

  // Inline-chip area visible inside the trigger when value is non-empty (inline mode).
  &__more {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--sc-kit--space--2);
    font-size: var(--sc-kit--font-size--sm);
    color: var(--sc-kit--color--text--muted);
    user-select: none;
  }
}