@use '../styles/variables' as tokens;

@layer components {
  .chip {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    outline: none; // Handled by focus-visible below
    border-style: solid;

    // Tokens mapped directly from docs
    height: var(--vi-chip-height, var(--vi-chip-height-md, #{tokens.$spacing-xl}));
    padding: var(--vi-chip-padding, 0 10px);
    border-radius: var(--vi-chip-border-radius, #{tokens.$border-radius-full});
    border-width: var(--vi-chip-border-width, 1px);
    gap: var(--vi-chip-gap, 6px);
    font-size: var(--vi-chip-font-size, #{tokens.$font-size-sm});
    font-weight: var(--vi-chip-font-weight, #{tokens.$font-weight-medium});
    transition: all var(--vi-chip-transition, 100ms ease);

    // Color tokens to be overridden by vi-chip variant
    background-color: var(--vi-chip-bg-color, #{tokens.$layer-02});
    border-color: var(--vi-chip-border-color, #{tokens.$border-03});
    color: var(--vi-chip-text-color, #{tokens.$color-foreground});
  }

  // Focus ring
  .chip:focus-visible {
    outline: #{tokens.$border-width-base} solid var(--vi-chip-focus-ring-color, #{tokens.$focus});
    outline-offset: 0;
    box-shadow: #{tokens.$focus-ring-shadow};
  }

  // Disabled state structure
  .chip[aria-disabled="true"] {
    cursor: not-allowed;
    // Colors handled by variant mapped tokens
  }

  .chip-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    // Scale slightly down to fit in chip
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    margin-inline-start: -4px; // Pull avatar slightly out as per common pill patterns
  }

  .chip-icon {
    display: inline-flex;
    align-items: center;
  }

  .chip-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .chip-group {
    display: flex;
    align-items: center;
    // Defaults to gap 8px and wrap as per requirements
  }
}