html {
  box-sizing: border-box;
}

body {
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}

:host {
  font-family: var(--c-font-family);
}

::-ms-reveal {
  display: none;
}

:host {
  /**
   * @prop --c-tag-background-color-active-hover: Active tag background color on hover
   * @prop --c-tag-background-color-active: Active tag background color
   * @prop --c-tag-background-color-hover: Tag background color on hover
   * @prop --c-tag-background-color: Tag background color
   * @prop --c-tag-badge-background-color-active: Active tag badge background color
   * @prop --c-tag-badge-background-color: Tag badge background color
   * @prop --c-tag-badge-text-color-active: Active tag badge text color
   * @prop --c-tag-badge-text-color: Tag badge text color
   * @prop --c-tag-border-color: Tag border color
   * @prop --c-tag-text-color-active: Active tag text color
   * @prop --c-tag-text-color: Tag text color
   * @prop --c-tag-border-radius: Tag border radius
   */
  --_c-tag-background-color-active-hover: var(--c-tag-background-color-active-hover, var(--c-primary-400));
  --_c-tag-background-color-active: var(--c-tag-background-color-active, var(--_c-tag-text-color));
  --_c-tag-background-color-hover: var(--c-tag-background-color-hover, rgba(var(--c-primary-rgb), 0.1));
  --_c-tag-background-color: var(--c-tag-background-color, var(--c-transparent));
  --_c-tag-badge-background-color-active: var(--c-tag-badge-background-color-active, var(--_c-tag-text-color-active));
  --_c-tag-badge-background-color: var(--c-tag-badge-background-color, var(--_c-tag-background-color-active));
  --_c-tag-badge-text-color-active: var(--c-tag-badge-text-color-active, var(--_c-tag-text-color));
  --_c-tag-badge-text-color: var(--c-tag-badge-text-color, var(--_c-tag-text-color-active));
  --_c-tag-border-color: var(--c-tag-border-color, var(--_c-tag-text-color));
  --_c-tag-text-color-active: var(--c-tag-text-color-active, var(--c-white));
  --_c-tag-text-color: var(--c-tag-text-color, var(--c-primary-600));
  --_c-tag-border-radius: var(--c-tag-border-radius, 999px);
  --c-tag-min-height: 28px;
  --c-tag-padding-y: 4px;
  --c-tag-padding-x: 12px;
  --c-tag-padding: var(--c-tag-padding-y) var(--c-tag-padding-x);
  --c-tag-badge-size: 20px;
  --c-tag-icon-button-offset: 0;
  --c-icon-button-outline-offset: 0;
  border-radius: var(--_c-tag-border-radius);
}
:host > div {
  align-items: center;
  background: var(--_c-tag-background-color);
  border-radius: var(--_c-tag-border-radius);
  box-shadow: inset 0 0 0 1px var(--_c-tag-border-color);
  color: var(--_c-tag-text-color);
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 400;
  gap: 8px;
  justify-content: center;
  line-height: 1;
  min-height: var(--c-tag-min-height);
  min-width: 48px;
  padding: var(--c-tag-padding);
  transform: translate3d(0, 0, 0);
  transition: background-color 0.2s ease;
  user-select: none;
}
:host c-icon-button {
  --_c-icon-button-height: 20px;
  --_c-icon-button-width: 20px;
  --_c-icon-button-background-color: var(--c-transparent);
  --_c-icon-button-text-color: var(--_c-tag-text-color);
  --_c-icon-button-background-hover: var(--_c-tag-background-color-active);
  margin: var(--c-tag-icon-button-offset);
}
:host c-icon-button:hover {
  --_c-icon-button-text-color: var(--_c-tag-text-color-active);
}

:host(:host:hover) > div {
  background-color: var(--_c-tag-background-color-hover);
}

:host > div[data-badge] {
  padding-left: var(--c-tag-padding-y);
}
:host > div[data-badge]::before {
  content: attr(data-badge);
  background-color: var(--_c-tag-badge-background-color);
  border-radius: calc(var(--_c-tag-border-radius) - var(--c-tag-padding-y));
  color: var(--_c-tag-badge-text-color);
  display: inline-grid;
  font-size: 12px;
  height: var(--c-tag-badge-size);
  line-height: 1;
  min-width: var(--c-tag-badge-size);
  padding: 0 4px;
  place-content: center;
}

:host(.c-tag--active) > div[data-badge]::before {
  background-color: var(--_c-tag-badge-background-color-active);
  color: var(--_c-tag-badge-text-color-active);
}

:host(.c-tag--closeable) > div {
  padding-right: var(--c-tag-padding-y);
}

:host(.c-tag--block) > div {
  flex-basis: 100%;
}

:host(.c-tag--fit) > div {
  flex-grow: 1;
}

:host(.c-tag--flat) > div {
  pointer-events: none;
}

:host(.c-tag--small) {
  --c-tag-min-height: 20px;
  --c-tag-padding-y: 2px;
  --c-tag-padding-x: 8px;
  --c-tag-badge-size: 16px;
  --c-tag-icon-button-offset: 1px 0 0;
}
:host(.c-tag--small) c-icon-button {
  --_c-icon-button-height: 16px;
  --_c-icon-button-width: 16px;
}

:host([data-badge].c-tag--small) > div {
  padding-left: var(--c-tag-padding-y);
}

:host(:focus) {
  outline: none;
}

:host(:focus-visible) {
  outline: 2px var(--_c-tag-border-color) solid;
  outline-offset: 2px;
  z-index: 1;
}

:host(.c-tag--active) > div {
  background: var(--_c-tag-background-color-active);
  color: var(--_c-tag-text-color-active);
  --c-icon-button-outline-color: var(--c-white);
}

:host(.c-tag--active .c-tag__badge) > div {
  background: var(--_c-tag-badge-background-color-active);
  color: var(--_c-tag-badge-text-color-active);
}

:host(.c-tag--active:hover) > div {
  background: var(--_c-tag-background-color-active-hover);
  box-shadow: none;
  --_c-icon-button-text-color: var(--_c-tag-text-color);
  --_c-icon-button-background-color: var(--_c-tag-text-color-active);
  --_c-icon-button-background-color-hover: var(--_c-tag-background-color-active);
}

:host(.c-tag--active) c-icon-button {
  --_c-icon-button-text-color: var(--_c-tag-text-color-active);
  --_c-icon-button-background-color-hover: var(--_c-tag-background-color-active);
}