[hidden] {
  display: none !important;
}

:host {
  position: relative;
  box-sizing: border-box;
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

/**
 * @prop --color: Color of the chip (default: primary)
 * @prop --background-color: Color of the chip background (default: primary alpha 0.1)
 * @prop --border-color: Color of the chip border (default: primary alpha 0.3)
 */
:host {
  display: inline-block;
  --flow-color-base: var(--flow-color-primary, #389DFF);
  --flow-color-base-rgb: var(--flow-color-primary-rgb, 56, 157, 255);
  --flow-color-contrast: var(--flow-color-primary-contrast, #ffffff);
  --flow-color-contrast-rgb: var(
    --flow-color-primary-contrast-rgb,
    255, 255, 255
  ) !important;
  --flow-color-shade: var(--flow-color-primary-shade, #2d7ecc);
  --flow-color-tint: var(--flow-color-primary-tint, #60b1ff);
  --color: var(--flow-color-base);
  --background-color: rgba(var(--flow-color-base-rgb), 0.1);
  --border-color: rgba(var(--flow-color-base-rgb), 0.3);
}

.chip {
  display: flex;
  align-items: center;
  border: solid var(--flow-input-border-width, 1px);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  cursor: default;
  font-family: var(--flow-font-sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol);
  color: var(--color);
  background-color: var(--background-color);
  border-color: var(--border-color);
}

.chip__clear {
  line-height: normal;
}

.chip--small {
  font-size: var(--flow-button-font-size-small, var(--flow-font-size-x-small, 0.75rem));
  height: calc(var(--flow-input-height-small, 30px) * 0.8);
  line-height: calc(var(--flow-input-height-small, 30px) - var(--flow-input-border-width, 1px) * 2);
  border-radius: var(--flow-input-border-radius, var(--flow-border-radius-medium, 0.25rem));
  padding: 0 var(--flow-spacing-x-small, 0.5rem);
}
.chip--small .chip__clear {
  margin-right: calc(var(--flow-spacing-x-small, 0.5rem) * -1);
}

.chip--medium {
  font-size: var(--flow-button-font-size-medium, var(--flow-font-size-small, 0.875rem));
  height: calc(var(--flow-input-height-medium, 40px) * 0.8);
  line-height: calc(var(--flow-input-height-medium, 40px) - var(--flow-input-border-width, 1px) * 2);
  border-radius: var(--flow-input-border-radius, var(--flow-border-radius-medium, 0.25rem));
  padding: 0 var(--flow-spacing-small, 0.75rem);
}
.chip--medium .chip__clear {
  margin-right: calc(var(--flow-spacing-small, 0.75rem) * -1);
}

.chip--large {
  font-size: var(--flow-button-font-size-large, var(--flow-font-size-medium, 1rem));
  height: calc(var(--flow-input-height-large, 50px) * 0.8);
  line-height: calc(var(--flow-input-height-large, 50px) - var(--flow-input-border-width, 1px) * 2);
  border-radius: var(--flow-input-border-radius, var(--flow-border-radius-medium, 0.25rem));
  padding: 0 var(--flow-spacing-medium, 1rem);
}
.chip--large .chip__clear {
  margin-right: calc(var(--flow-spacing-medium, 1rem) * -1);
}

.chip--pill {
  border-radius: var(--flow-border-radius-pill, 9999px);
}