@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(--radius-5),
  ),
  $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) {
      cursor: not-allowed;
      background-color: var(--bg-2);
      opacity: 1;

      &:focus-within {
        border-color: var(--control-border-color);
        outline: 0;
      }

      > .chip {
        pointer-events: none;
        opacity: var(--control-disabled-opacity);
      }
    }
  }
}