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

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

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

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

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

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

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

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

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

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

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

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

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

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

:host(.pds-chip--dropdown) {
  padding: 0;
}
:host(.pds-chip--dropdown) .pds-chip__dot {
  margin-block-end: calc(var(--spacing-xxs) / 4);
  margin-block-start: var(--spacing-xxs);
}

.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-sm);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  padding-block: var(--spacing-xs);
  padding-inline: var(--spacing-lg);
}
.pds-chip__button:focus-visible {
  box-shadow: var(--box-shadow-focus);
  outline: none;
}
.pds-chip__button pds-icon {
  margin-inline-end: calc(var(--spacing-xxs) * -1);
  margin-inline-start: var(--spacing-xs);
}

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

.pds-chip__close {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 50%;
  height: var(--sizing-close);
  margin-inline-end: calc(var(--spacing-md) * -1);
  margin-inline-start: var(--spacing-xs);
  padding: var(--sizing-close);
  position: relative;
  width: var(--sizing-close);
}
.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-body);
  padding-block: var(--spacing-sm);
  padding-inline: var(--spacing-xxl);
}
:host(.pds-chip--large):host(.pds-chip--dropdown) {
  padding-block: var(--spacing-xs);
  padding-inline: var(--spacing-xxs);
}
: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-body);
  padding-inline: var(--spacing-xl);
}
:host(.pds-chip--large) .pds-chip__close {
  height: var(--sizing-close-lg);
  margin-inline-end: calc(var(--spacing-xl) * -1);
  width: var(--sizing-close-lg);
}
:host(.pds-chip--large):host(.pds-chip--tag) {
  padding-block: var(--spacing-xs);
}