/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
/* Do not use this */
/* Use this */
:root {
  /**
    @prop --go-chip-gap:
      Gap between label, prefix and suffix.
      - default: 0.5em
  */
  --go-chip-gap: 0.5em;
  /**
    @prop --go-chip-padding-y:
      Vertical padding of the chip
      - default: 0.25em
  */
  --go-chip-padding-y: 0.25em;
  /**
    @prop --go-chip-padding-x:
      Horizontal padding of the chip
      - default: 0.75em
  */
  --go-chip-padding-x: 0.75em;
  /**
    @prop --go-chip-padding:
      Padding of the chip
      - default: var(--go-chip-padding-y) var(--go-chip-padding-x)
  */
  --go-chip-padding: var(--go-chip-padding-y) var(--go-chip-padding-x);
  /**
    @prop --go-chip-radius:
      Radius of chip
      - default: var(--radius-2)
  */
  --go-chip-radius: var(--radius-2);
  /**
    @prop --go-chip-color-bg:
      Background color of chip
      - default: var(--go-color-neutral-100)
  */
  --go-chip-color-bg: var(--go-color-neutral-100);
  /**
    @prop --go-chip-color-fg:
      Foreground color of chip
      - default: var(--go-color-text)
  */
  --go-chip-color-fg: var(--go-color-text);
  /**
    @prop --go-chip-color-bg-hover:
      Background color on hover for `clickable` chips
      - default: var(--go-color-neutral-200)
  */
  --go-chip-color-bg-hover: var(--go-color-neutral-200);
  /**
    @prop --go-chip-font-size:
      Font size of chip
      - default: var(--go-size--1)
  */
  --go-chip-font-size: var(--go-size--1);
  /**
    @prop --go-chip-border-width:
      Border width of the chip
      - default: 2px
  */
  --go-chip-border-width: 2px;
  /**
    @prop --go-chip-color-border:
      Border color of the chip
      - default: transparent
  */
  --go-chip-color-border: transparent;
  /**
    @prop --go-chip-dismiss-btn-gap:
      Gap between chip content and the dismiss button (only applicable when `dismissable` is `true`)
      - default: 0
  */
  --go-chip-dismiss-btn-gap: 0;
  /**
    @prop --go-chip-dismiss-btn-size:
      Width and height of the dismiss button
      - default: calc(1.5em + 2 * var(--go-chip-padding-y))
  */
  --go-chip-dismiss-btn-size: calc(1.5em + 2 * var(--go-chip-padding-y));
}

go-chip {
  display: inline-flex;
  align-items: center;
  border: var(--go-chip-border-width) solid var(--go-chip-color-border);
  border-radius: var(--go-chip-radius);
  background-color: var(--go-chip-color-bg);
  color: var(--go-chip-color-fg);
  font-size: var(--go-chip-font-size);
}
go-chip .chip-main {
  padding: var(--go-chip-padding);
  border-radius: calc(var(--go-chip-radius) - var(--go-chip-border-width));
  line-height: 1.5;
  display: flex;
  gap: var(--go-chip-gap);
  align-items: center;
}
go-chip[outline] {
  background-color: transparent;
}
go-chip.clickable .chip-main {
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  cursor: pointer;
  transition: background-color var(--go-duration-normal) var(--go-timing-function), color var(--go-duration-normal) var(--go-timing-function), outline-offset var(--go-duration-fast) var(--go-timing-function);
}
@media (prefers-reduced-motion: reduce) {
  go-chip.clickable .chip-main {
    transition-duration: 0s;
  }
}
go-chip.clickable .chip-main:focus-visible {
  outline: var(--go-focus-outline-width, 2px) solid var(--go-focus-outline-color, #000);
  outline-offset: var(--go-focus-outline-offset);
}
go-chip.clickable .chip-main:active {
  --go-focus-outline-offset: 0;
  box-shadow: var(--inner-shadow-3);
}
go-chip.clickable .chip-main:hover, go-chip.clickable .chip-main:focus-visible {
  background-color: var(--go-chip-color-bg-hover);
}
go-chip.clickable.dismissible .chip-main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
go-chip.dismissible {
  gap: var(--go-chip-dismiss-btn-gap);
  align-items: stretch;
}
go-chip.dismissible .chip-main {
  position: relative;
}
go-chip.dismissible .chip-main::after {
  content: "";
  position: absolute;
  top: var(--go-chip-padding-y);
  right: 0;
  bottom: var(--go-chip-padding-y);
  width: 0.0625rem;
  background: var(--go-chip-color-border);
  filter: brightness(0.9);
}
go-chip.dismissible .dismiss-btn {
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  cursor: pointer;
  transition: background-color var(--go-duration-normal) var(--go-timing-function), color var(--go-duration-normal) var(--go-timing-function), outline-offset var(--go-duration-fast) var(--go-timing-function);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--go-chip-radius) - var(--go-chip-border-width));
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  width: var(--go-chip-dismiss-btn-size);
  height: var(--go-chip-dismiss-btn-size);
}
@media (prefers-reduced-motion: reduce) {
  go-chip.dismissible .dismiss-btn {
    transition-duration: 0s;
  }
}
go-chip.dismissible .dismiss-btn:focus-visible {
  outline: var(--go-focus-outline-width, 2px) solid var(--go-focus-outline-color, #000);
  outline-offset: var(--go-focus-outline-offset);
}
go-chip.dismissible .dismiss-btn:active {
  --go-focus-outline-offset: 0;
  box-shadow: var(--inner-shadow-3);
}
go-chip.dismissible .dismiss-btn svg {
  display: block;
  width: auto;
  height: 1.2em;
}
go-chip.dismissible .dismiss-btn:hover, go-chip.dismissible .dismiss-btn:focus-visible {
  background-color: var(--go-chip-color-bg-hover);
}

@media (prefers-color-scheme: light) {
  go-chip[variant=primary] {
    --go-chip-color-border: var(--go-color-primary-200);
    --go-chip-color-bg: var(--go-color-primary-200);
    --go-chip-color-bg-hover: var(--go-color-primary-300);
  }
  go-chip[variant=secondary] {
    --go-chip-color-border: var(--go-color-secondary-200);
    --go-chip-color-bg: var(--go-color-secondary-200);
    --go-chip-color-bg-hover: var(--go-color-secondary-300);
  }
  go-chip[variant=success] {
    --go-chip-color-border: var(--go-color-success-200);
    --go-chip-color-bg: var(--go-color-success-200);
    --go-chip-color-bg-hover: var(--go-color-success-300);
  }
  go-chip[variant=critical] {
    --go-chip-color-border: var(--go-color-critical-200);
    --go-chip-color-bg: var(--go-color-critical-200);
    --go-chip-color-bg-hover: var(--go-color-critical-300);
  }
  go-chip[variant=neutral] {
    --go-chip-color-border: var(--go-color-neutral-200);
    --go-chip-color-bg: var(--go-color-neutral-200);
    --go-chip-color-bg-hover: var(--go-color-neutral-300);
  }
}
@media (prefers-color-scheme: dark) {
  go-chip[variant=primary] {
    --go-chip-color-border: var(--go-color-primary-400);
    --go-chip-color-bg: var(--go-color-primary-400);
    --go-chip-color-bg-hover: var(--go-color-primary-500);
  }
  go-chip[variant=secondary] {
    --go-chip-color-border: var(--go-color-secondary-300);
    --go-chip-color-bg: var(--go-color-secondary-300);
    --go-chip-color-bg-hover: var(--go-color-secondary-400);
  }
  go-chip[variant=success] {
    --go-chip-color-border: var(--go-color-success-300);
    --go-chip-color-bg: var(--go-color-success-300);
    --go-chip-color-bg-hover: var(--go-color-success-400);
  }
  go-chip[variant=critical] {
    --go-chip-color-border: var(--go-color-critical-300);
    --go-chip-color-bg: var(--go-color-critical-300);
    --go-chip-color-bg-hover: var(--go-color-critical-400);
  }
  go-chip[variant=neutral] {
    --go-chip-color-border: var(--go-color-neutral-300);
    --go-chip-color-bg: var(--go-color-neutral-300);
    --go-chip-color-bg-hover: var(--go-color-neutral-400);
  }
}
:where([color-scheme=light], [data-theme=light]) go-chip[variant=primary] {
  --go-chip-color-border: var(--go-color-primary-200);
  --go-chip-color-bg: var(--go-color-primary-200);
  --go-chip-color-bg-hover: var(--go-color-primary-300);
}
:where([color-scheme=light], [data-theme=light]) go-chip[variant=secondary] {
  --go-chip-color-border: var(--go-color-secondary-200);
  --go-chip-color-bg: var(--go-color-secondary-200);
  --go-chip-color-bg-hover: var(--go-color-secondary-300);
}
:where([color-scheme=light], [data-theme=light]) go-chip[variant=success] {
  --go-chip-color-border: var(--go-color-success-200);
  --go-chip-color-bg: var(--go-color-success-200);
  --go-chip-color-bg-hover: var(--go-color-success-300);
}
:where([color-scheme=light], [data-theme=light]) go-chip[variant=critical] {
  --go-chip-color-border: var(--go-color-critical-200);
  --go-chip-color-bg: var(--go-color-critical-200);
  --go-chip-color-bg-hover: var(--go-color-critical-300);
}
:where([color-scheme=light], [data-theme=light]) go-chip[variant=neutral] {
  --go-chip-color-border: var(--go-color-neutral-200);
  --go-chip-color-bg: var(--go-color-neutral-200);
  --go-chip-color-bg-hover: var(--go-color-neutral-300);
}

:where([color-scheme=dark], [data-theme=dark]) go-chip[variant=primary] {
  --go-chip-color-border: var(--go-color-primary-400);
  --go-chip-color-bg: var(--go-color-primary-400);
  --go-chip-color-bg-hover: var(--go-color-primary-500);
}
:where([color-scheme=dark], [data-theme=dark]) go-chip[variant=secondary] {
  --go-chip-color-border: var(--go-color-secondary-300);
  --go-chip-color-bg: var(--go-color-secondary-300);
  --go-chip-color-bg-hover: var(--go-color-secondary-400);
}
:where([color-scheme=dark], [data-theme=dark]) go-chip[variant=success] {
  --go-chip-color-border: var(--go-color-success-300);
  --go-chip-color-bg: var(--go-color-success-300);
  --go-chip-color-bg-hover: var(--go-color-success-400);
}
:where([color-scheme=dark], [data-theme=dark]) go-chip[variant=critical] {
  --go-chip-color-border: var(--go-color-critical-300);
  --go-chip-color-bg: var(--go-color-critical-300);
  --go-chip-color-bg-hover: var(--go-color-critical-400);
}
:where([color-scheme=dark], [data-theme=dark]) go-chip[variant=neutral] {
  --go-chip-color-border: var(--go-color-neutral-300);
  --go-chip-color-bg: var(--go-color-neutral-300);
  --go-chip-color-bg-hover: var(--go-color-neutral-400);
}