@use "../functions" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/focus-ring" as *;
@use "../mixins/tokens" as *;

$chip-input-tokens: () !default;

// scss-docs-start chip-input-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$chip-input-tokens: defaults(
  (
    --chip-input-padding-y: .75rem,
    --chip-input-padding-x: .75rem,
    --chip-input-gap: .375rem,
    --chip-input-ghost-min-width: 5rem,
    --control-fg: var(--btn-input-fg),
    --control-bg: var(--btn-input-bg),
    --control-border-width: var(--border-width),
    --control-border-color: var(--border-color),
    --control-border-radius: var(--border-radius),
  ),
  $chip-input-tokens
);
// scss-docs-end chip-input-tokens

@layer forms {
  .chip-input {
    @include tokens($chip-input-tokens);

    // Flexbox wrapping layout
    display: flex;
    flex-wrap: wrap;
    gap: var(--chip-input-gap);
    align-items: center;
    padding: var(--chip-input-padding-y) var(--chip-input-padding-x);

    color: var(--control-fg);
    background-color: var(--control-bg);
    border: var(--control-border-width) solid var(--control-border-color);
    @include border-radius(var(--control-border-radius), 0);

    // Focus state when ghost input is focused
    &:focus-within {
      --focus-ring-offset: -1px;
      border-color: var(--focus-ring-color);
      @include focus-ring(true);
    }

    // Ghost input fills remaining space
    > .form-ghost {
      flex: 1 1 0;
      min-width: var(--chip-input-ghost-min-width);
      min-height: 1.75rem;
    }

    // Disabled state
    &.disabled,
    &:has(.form-ghost:disabled) {
      background-color: var(--bg-2);
      opacity: 1;

      > .chip {
        opacity: var(--control-disabled-opacity);

        .chip-dismiss {
          pointer-events: none;
        }
      }

      > .form-ghost {
        cursor: not-allowed;
      }
    }
  }

  // Theme cascade: .chip-input.theme-* passes theme to child chips
  // Chips inherit theme variables from parent
  // @each $color-name, $theme-props in $theme-map {
  //   .chip-input.theme-#{$color-name} > .chip {
  //     // Subtle default state
  //     --chip-color: var(--theme-fg);
  //     --chip-bg: var(--theme-bg-subtle);

  //     // Selected/active solid state
  //     --chip-selected-color: var(--theme-contrast);
  //     --chip-selected-bg: var(--theme-bg);
  //     --chip-selected-border-color: var(--theme-bg);
  //   }
  // }

  // // Sizing variants
  // .chip-input-sm {
  //   --control-min-height: #{$control-min-height-sm};
  //   --control-padding-y: #{$control-padding-y-sm};
  //   --control-padding-x: #{$control-padding-x-sm};
  //   --control-font-size: #{$control-font-size-sm};
  //   --control-line-height: #{$control-line-height-sm};
  //   --control-border-radius: #{$control-border-radius-sm};
  //   --chip-input-gap: .25rem;
  //   --chip-input-chip-font-size: .8125em;
  // }

  // .chip-input-lg {
  //   --control-min-height: #{$control-min-height-lg};
  //   --control-padding-y: #{$control-padding-y-lg};
  //   --control-padding-x: #{$control-padding-x-lg};
  //   --control-font-size: #{$control-font-size-lg};
  //   --control-line-height: #{$control-line-height-lg};
  //   --control-border-radius: #{$control-border-radius-lg};
  //   --chip-input-gap: .5rem;
  //   --chip-input-chip-font-size: .9375em;
  // }
}