:host {
  --sizing-close: var(--pine-dimension-125);
  align-items: center;
  border-radius: var(--pine-dimension-sm);
  display: inline-flex;
  padding-block: var(--pine-dimension-025);
  padding-inline: var(--pine-dimension-100);
}

:host(.pds-chip--accent) {
  background: var(--pine-chip-color-accent);
  border: var(--pine-border-width) solid var(--pine-chip-color-accent-hover);
}
:host(.pds-chip--accent) .pds-chip__dot {
  /* stylelint-disable-next-line */
  background: var(--pine-chip-color-accent-dot);
}
:host(.pds-chip--accent) .pds-chip__label, :host(.pds-chip--accent) .pds-chip__button, :host(.pds-chip--accent) .pds-chip__close {
  /* stylelint-disable-next-line */
  color: var(--pine-chip-color-accent-text);
  font-weight: var(--pine-font-weight-medium);
}
:host(.pds-chip--accent) .pds-chip__close:hover {
  /* stylelint-disable-next-line */
  background: var(--pine-chip-color-accent-hover);
}

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

:host(.pds-chip--danger) {
  background: var(--pine-chip-color-danger);
  border: var(--pine-border-width) solid var(--pine-chip-color-danger-hover);
}
:host(.pds-chip--danger) .pds-chip__dot {
  /* stylelint-disable-next-line */
  background: var(--pine-chip-color-danger-dot);
}
:host(.pds-chip--danger) .pds-chip__label, :host(.pds-chip--danger) .pds-chip__button, :host(.pds-chip--danger) .pds-chip__close {
  /* stylelint-disable-next-line */
  color: var(--pine-chip-color-danger-text);
  font-weight: var(--pine-font-weight-medium);
}
:host(.pds-chip--danger) .pds-chip__close:hover {
  /* stylelint-disable-next-line */
  background: var(--pine-chip-color-danger-hover);
}

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

:host(.pds-chip--info) {
  background: var(--pine-chip-color-info);
  border: var(--pine-border-width) solid var(--pine-chip-color-info-hover);
}
:host(.pds-chip--info) .pds-chip__dot {
  /* stylelint-disable-next-line */
  background: var(--pine-chip-color-info-dot);
}
:host(.pds-chip--info) .pds-chip__label, :host(.pds-chip--info) .pds-chip__button, :host(.pds-chip--info) .pds-chip__close {
  /* stylelint-disable-next-line */
  color: var(--pine-chip-color-info-text);
  font-weight: var(--pine-font-weight-medium);
}
:host(.pds-chip--info) .pds-chip__close:hover {
  /* stylelint-disable-next-line */
  background: var(--pine-chip-color-info-hover);
}

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

:host(.pds-chip--neutral) {
  background: var(--pine-chip-color-neutral);
  border: var(--pine-border-width) solid var(--pine-chip-color-neutral-hover);
}
:host(.pds-chip--neutral) .pds-chip__dot {
  /* stylelint-disable-next-line */
  background: var(--pine-chip-color-neutral-dot);
}
:host(.pds-chip--neutral) .pds-chip__label, :host(.pds-chip--neutral) .pds-chip__button, :host(.pds-chip--neutral) .pds-chip__close {
  /* stylelint-disable-next-line */
  color: var(--pine-chip-color-neutral-text);
  font-weight: var(--pine-font-weight-medium);
}
:host(.pds-chip--neutral) .pds-chip__close:hover {
  /* stylelint-disable-next-line */
  background: var(--pine-chip-color-neutral-hover);
}

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

:host(.pds-chip--success) {
  background: var(--pine-chip-color-success);
  border: var(--pine-border-width) solid var(--pine-chip-color-success-hover);
}
:host(.pds-chip--success) .pds-chip__dot {
  /* stylelint-disable-next-line */
  background: var(--pine-chip-color-success-dot);
}
:host(.pds-chip--success) .pds-chip__label, :host(.pds-chip--success) .pds-chip__button, :host(.pds-chip--success) .pds-chip__close {
  /* stylelint-disable-next-line */
  color: var(--pine-chip-color-success-text);
  font-weight: var(--pine-font-weight-medium);
}
:host(.pds-chip--success) .pds-chip__close:hover {
  /* stylelint-disable-next-line */
  background: var(--pine-chip-color-success-hover);
}

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

:host(.pds-chip--warning) {
  background: var(--pine-chip-color-warning);
  border: var(--pine-border-width) solid var(--pine-chip-color-warning-hover);
}
:host(.pds-chip--warning) .pds-chip__dot {
  /* stylelint-disable-next-line */
  background: var(--pine-chip-color-warning-dot);
}
:host(.pds-chip--warning) .pds-chip__label, :host(.pds-chip--warning) .pds-chip__button, :host(.pds-chip--warning) .pds-chip__close {
  /* stylelint-disable-next-line */
  color: var(--pine-chip-color-warning-text);
  font-weight: var(--pine-font-weight-medium);
}
:host(.pds-chip--warning) .pds-chip__close:hover {
  /* stylelint-disable-next-line */
  background: var(--pine-chip-color-warning-hover);
}

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

.pds-chip__dot {
  border: var(--pine-border-width) solid transparent;
  border-radius: var(--pine-border-radius-full);
  display: inline-block;
  height: var(--pine-dimension-2xs);
  margin-inline-end: var(--pine-dimension-2xs);
  width: var(--pine-dimension-2xs);
}

.pds-chip__label {
  align-items: center;
  display: flex;
}
.pds-chip__label pds-icon {
  margin-inline-end: var(--pine-dimension-2xs);
}

.pds-chip__label, .pds-chip__button {
  font: var(--pine-typography-body-medium);
  letter-spacing: var(--pine-letter-spacing);
}

:host(.pds-chip--dropdown) {
  padding: var(--pine-dimension-none);
}

.pds-chip__button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: var(--pine-dimension-none);
  border-radius: var(--pine-dimension-sm);
  cursor: pointer;
  display: flex;
  padding: var(--pine-dimension-025) var(--pine-dimension-100);
}
.pds-chip__button:focus-visible {
  outline: var(--pine-outline-focus);
  outline-offset: var(--pine-border-width);
}
.pds-chip__button pds-icon:first-child {
  margin-inline-end: var(--pine-dimension-2xs);
}
.pds-chip__button pds-icon:last-child {
  margin-inline-end: calc(var(--pine-dimension-025) * -1);
  margin-inline-start: var(--pine-dimension-2xs);
}

.pds-chip__close {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--pine-border-radius-full);
  box-sizing: border-box;
  height: var(--sizing-close);
  margin-inline-end: calc(var(--pine-dimension-xs) * -1);
  margin-inline-start: var(--pine-dimension-2xs);
  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 {
  outline: var(--pine-outline-focus);
}

:host(.pds-chip--sm) {
  --sizing-close: var(--pine-dimension-100);
  padding-block: var(--pine-dimension-025);
  padding-inline: var(--pine-dimension-100);
}
:host(.pds-chip--sm) .pds-chip__label, :host(.pds-chip--sm) .pds-chip__button {
  font: var(--pine-typography-body-sm-medium);
  letter-spacing: var(--pine-letter-spacing);
}

:host(.pds-chip--sm.pds-chip--dropdown) {
  padding: var(--pine-dimension-none);
}
:host(.pds-chip--sm.pds-chip--dropdown) .pds-chip__button {
  padding: var(--pine-dimension-025) var(--pine-dimension-100);
}

:host(.pds-chip--sm.pds-chip--brand) .pds-chip__label {
  padding: var(--pine-dimension-025) var(--pine-dimension-100);
}

:host(.pds-chip--lg) {
  padding-block: var(--pine-dimension-025);
  padding-inline: var(--pine-dimension-150);
}
:host(.pds-chip--lg) .pds-chip__label, :host(.pds-chip--lg) .pds-chip__button {
  font-family: var(--pine-font-family-heading);
  font-size: var(--pine-font-size-heading-6);
  font-weight: var(--pine-font-weight-medium);
  letter-spacing: var(--pine-letter-spacing-heading-6);
}

:host(.pds-chip--lg.pds-chip--dropdown) {
  padding: var(--pine-dimension-none);
}
:host(.pds-chip--lg.pds-chip--dropdown) .pds-chip__button {
  padding: var(--pine-dimension-025) var(--pine-dimension-150);
}

:host(.pds-chip--brand) {
  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
  background: linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);
  border: 0;
  padding: 1px;
  position: relative;
}
:host(.pds-chip--brand) .pds-chip__label {
  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
  background: rgba(255, 255, 255, 0.9);
  border-radius: calc(var(--pine-dimension-sm) - 1px);
  /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */
  color: var(--pine-color-grey-900);
  font-weight: var(--pine-font-weight-medium);
  padding: var(--pine-dimension-025) var(--pine-dimension-100);
  position: relative;
  z-index: var(--pine-z-index-raised);
}
:host(.pds-chip--brand) .pds-chip__label pds-icon {
  margin-inline-end: var(--pine-dimension-2xs);
}
:host(.pds-chip--brand) .pds-chip__button, :host(.pds-chip--brand) .pds-chip__close {
  /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */
  color: var(--pine-color-grey-900);
  font-weight: var(--pine-font-weight-medium);
  position: relative;
  z-index: var(--pine-z-index-raised);
}
:host(.pds-chip--brand) .pds-chip__button pds-icon:first-child {
  margin-inline-end: var(--pine-dimension-2xs);
}
:host(.pds-chip--brand) .pds-chip__close:hover {
  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
  background: rgba(255, 255, 255, 0.8);
}