:host {
  --background-danger: var(--supreme-waffle-color-red-100);
  --background-danger-dot: var(--supreme-waffle-color-red-300);
  --background-danger-interactive: var(--supreme-waffle-color-red-200);
  --background-neutral: var(--supreme-waffle-color-neutral-grey-300);
  --background-neutral-dot: var(--supreme-waffle-color-neutral-charcoal-100);
  --background-neutral-interactive: var(--supreme-waffle-color-neutral-grey-400);
  --background-info: var(--supreme-waffle-color-primary-100);
  --background-info-dot: var(--supreme-waffle-color-primary-300);
  --background-info-interactive: var(--supreme-waffle-color-primary-200);
  --background-accent: var(--supreme-waffle-color-purple-100);
  --background-accent-dot: var(--supreme-waffle-color-purple-300);
  --background-accent-interactive: var(--supreme-waffle-color-purple-200);
  --background-success: var(--supreme-waffle-color-green-100);
  --background-success-dot: var(--supreme-waffle-color-green-300);
  --background-success-interactive: var(--supreme-waffle-color-green-200);
  --background-warning: var(--supreme-waffle-color-yellow-100);
  --background-warning-dot: var(--supreme-waffle-color-yellow-300);
  --background-warning-interactive: var(--supreme-waffle-color-yellow-200);
  --box-shadow-focus: 0 0 0 4px var(--supreme-waffle-color-primary-200);
  --border-radius: var(--supreme-waffle-border-radius-lg);
  --font-size: var(--supreme-waffle-font-size-body-sm);
  --font-size-lg: var(--supreme-waffle-font-size-body);
  --font-weight: var(--supreme-waffle-font-weight-medium);
  --line-height: var(--supreme-waffle-line-height-sm);
  --padding-block-sm: calc(var(--supreme-waffle-spacing-xxs) / 2);
  --padding-block: var(--supreme-waffle-spacing-xxs);
  --padding-block-lg: 6px;
  --padding-inline-sm: calc(var(--supreme-waffle-spacing-xxs) / 2);
  --padding-inline: 10px;
  --padding-inline-lg: calc(var(--supreme-waffle-spacing-md) / 2);
  --padding-inline-xl: 14px;
  --margin-block-xs: calc(var(--supreme-waffle-spacing-xxs) / 2);
  --margin-inline-sm: calc(var(--supreme-waffle-spacing-xs) / 2);
  --margin-inline-xs: calc(var(--supreme-waffle-spacing-xxs) / 2);
  --margin-inline: 4px;
  --margin-inline-lg: var(--supreme-waffle-spacing-xs);
  --margin-inline-xl: calc(var(--supreme-waffle-spacing-md) / 2);
  --dot-size: 4px;
  --close-size: 10px;
  --close-size-lg: 24px;
  align-items: center;
  border-radius: var(--border-radius);
  display: inline-flex;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  padding-block: var(--padding-block-sm);
  padding-inline: var(--padding-inline);
}

:host(.pds-chip--accent) {
  background: var(--background-accent);
}
:host(.pds-chip--accent) .pds-chip__dot {
  /* stylelint-disable-next-line */
  background: var(--background-accent-dot);
}
:host(.pds-chip--accent) .pds-chip__close:hover {
  /* stylelint-disable-next-line */
  background: var(--background-accent-interactive);
}

:host(.pds-chip--accent.pds-chip--dropdown:hover) {
  /* stylelint-disable-next-line */
  background: var(--background-accent-interactive);
}

:host(.pds-chip--danger) {
  background: var(--background-danger);
}
:host(.pds-chip--danger) .pds-chip__dot {
  /* stylelint-disable-next-line */
  background: var(--background-danger-dot);
}
:host(.pds-chip--danger) .pds-chip__close:hover {
  /* stylelint-disable-next-line */
  background: var(--background-danger-interactive);
}

:host(.pds-chip--danger.pds-chip--dropdown:hover) {
  /* stylelint-disable-next-line */
  background: var(--background-danger-interactive);
}

:host(.pds-chip--info) {
  background: var(--background-info);
}
:host(.pds-chip--info) .pds-chip__dot {
  /* stylelint-disable-next-line */
  background: var(--background-info-dot);
}
:host(.pds-chip--info) .pds-chip__close:hover {
  /* stylelint-disable-next-line */
  background: var(--background-info-interactive);
}

:host(.pds-chip--info.pds-chip--dropdown:hover) {
  /* stylelint-disable-next-line */
  background: var(--background-info-interactive);
}

:host(.pds-chip--neutral) {
  background: var(--background-neutral);
}
:host(.pds-chip--neutral) .pds-chip__dot {
  /* stylelint-disable-next-line */
  background: var(--background-neutral-dot);
}
:host(.pds-chip--neutral) .pds-chip__close:hover {
  /* stylelint-disable-next-line */
  background: var(--background-neutral-interactive);
}

:host(.pds-chip--neutral.pds-chip--dropdown:hover) {
  /* stylelint-disable-next-line */
  background: var(--background-neutral-interactive);
}

:host(.pds-chip--success) {
  background: var(--background-success);
}
:host(.pds-chip--success) .pds-chip__dot {
  /* stylelint-disable-next-line */
  background: var(--background-success-dot);
}
:host(.pds-chip--success) .pds-chip__close:hover {
  /* stylelint-disable-next-line */
  background: var(--background-success-interactive);
}

:host(.pds-chip--success.pds-chip--dropdown:hover) {
  /* stylelint-disable-next-line */
  background: var(--background-success-interactive);
}

:host(.pds-chip--warning) {
  background: var(--background-warning);
}
:host(.pds-chip--warning) .pds-chip__dot {
  /* stylelint-disable-next-line */
  background: var(--background-warning-dot);
}
:host(.pds-chip--warning) .pds-chip__close:hover {
  /* stylelint-disable-next-line */
  background: var(--background-warning-interactive);
}

:host(.pds-chip--warning.pds-chip--dropdown:hover) {
  /* stylelint-disable-next-line */
  background: var(--background-warning-interactive);
}

.pds-chip__dot {
  border: 1px solid transparent;
  border-radius: 50%;
  display: inline-block;
  height: var(--dot-size);
  margin-block-end: var(--margin-block-xs);
  margin-inline-end: var(--margin-inline-sm);
  width: var(--dot-size);
}

:host(.pds-chip--dropdown) {
  padding: 0;
}
:host(.pds-chip--dropdown) .pds-chip__dot {
  margin-block-end: 1px;
  margin-block-start: var(--margin-block-xs);
}

.pds-chip__button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--border-radius);
  display: flex;
  font-family: inherit;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  padding-block: var(--padding-block-sm);
  padding-inline: var(--padding-inline);
}
.pds-chip__button:focus-visible {
  box-shadow: var(--box-shadow-focus);
  outline: none;
}
.pds-chip__button pds-icon {
  margin-inline-end: calc(var(--margin-inline-xs) * -1);
  margin-inline-start: var(--margin-inline);
}

:host(.pds-chip--tag) {
  padding-block: var(--padding-block-sm);
}

.pds-chip__close {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 50%;
  height: var(--close-size);
  margin-inline-end: calc(var(--margin-inline-lg) * -1);
  margin-inline-start: var(--margin-inline);
  padding: var(--close-size);
  position: relative;
  width: var(--close-size);
}
.pds-chip__close pds-icon {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.pds-chip__close:focus-visible {
  box-shadow: var(--box-shadow-focus);
  outline: none;
}

:host(.pds-chip--large) {
  font-size: var(--font-size-lg);
  padding-block: var(--padding-block-lg);
  padding-inline: var(--padding-inline-xl);
}
:host(.pds-chip--large):host(.pds-chip--dropdown) {
  padding-block: var(--padding-block);
  padding-inline: var(--padding-inline-sm);
}
:host(.pds-chip--large):host(.pds-chip--dropdown) .pds-chip__dot {
  margin-block-end: 0;
}
:host(.pds-chip--large) .pds-chip__button {
  font-size: var(--font-size-lg);
  padding-inline: var(--padding-inline-lg);
}
:host(.pds-chip--large) .pds-chip__close {
  height: var(--close-size-lg);
  margin-inline-end: calc(var(--margin-inline-xl) * -1);
  width: var(--close-size-lg);
}
:host(.pds-chip--large):host(.pds-chip--tag) {
  padding-block: var(--padding-block);
}