@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./chip.common";

// Ionic Chip
// --------------------------------------------------

:host {
  /**
   * @prop --focus-ring-color: Color of the focus ring
   * @prop --focus-ring-width: Width of the focus ring
   */
  --focus-ring-color: #{globals.$ion-border-focus-default};
  --focus-ring-width: #{globals.$ion-border-size-050};

  @include globals.padding(globals.$ion-space-150, globals.$ion-space-200);
  @include globals.border-radius(var(--border-radius));
  @include globals.typography(globals.$ion-body-sm-medium);

  gap: globals.$ion-space-100;

  line-height: globals.$ion-font-line-height-full;

  cursor: auto;
}

// Outline Chip
// ---------------------------------------------

:host(.chip-outline) {
  border-width: globals.$ion-border-size-025;
  border-style: globals.$ion-border-style-solid;
}

// Chip: Focus
// ---------------------------------------------

:host(.ion-focused) {
  @include globals.focused-state(null, null, var(--focus-ring-color));
}

// Chip: Disabled
// ---------------------------------------------

:host(.chip-disabled)::after {
  @include globals.disabled-state();
}

// Chip Shapes
// ---------------------------------------------

:host(.chip-soft) {
  --border-radius: #{globals.$ion-border-radius-100};
}

:host(.chip-round) {
  --border-radius: #{globals.$ion-border-radius-400};
}

:host(.chip-rectangular) {
  --border-radius: #{globals.$ion-border-radius-0};
}

// Size
// ---------------------------------------------

:host(.chip-small) {
  min-height: globals.$ion-scale-600;

  font-size: globals.$ion-font-size-300;

  ::slotted(ion-icon) {
    font-size: globals.$ion-font-size-300;
  }
}

:host(.chip-large) {
  min-height: globals.$ion-scale-800;

  font-size: globals.$ion-font-size-350;

  ::slotted(ion-icon) {
    font-size: globals.$ion-font-size-400;
  }
}

// Subtle Chip
// ---------------------------------------------

:host(.chip-subtle) {
  --background: #{globals.$ion-primitives-neutral-100};
  --color: #{globals.$ion-primitives-neutral-800};
}

:host(.chip-outline.chip-subtle) {
  border-color: globals.$ion-primitives-neutral-300;
}

// Bold Chip
// ---------------------------------------------

:host(.chip-bold) {
  --background: #{globals.$ion-bg-neutral-bold-default};
  --color: #{globals.$ion-bg-surface-default};
}

:host(.chip-outline.chip-bold) {
  // TODO(FW-6450): this is a made up design choice based on a
  // darker shade of the background color
  border-color: globals.$ion-text-default;
}

// Chip Colors
// ---------------------------------------------

// Subtle
:host(.chip-subtle.ion-color) {
  background: globals.current-color(base, $subtle: true);
  color: globals.current-color(contrast, $subtle: true);
}

:host(.chip-subtle.chip-outline.ion-color) {
  border-color: globals.current-color(shade, $subtle: true);
}

// Bold
:host(.chip-bold.ion-color) {
  background: globals.current-color(base);
  color: globals.current-color(contrast);
}

:host(.chip-bold.chip-outline.ion-color) {
  border-color: globals.current-color(shade);
}