$text-secondary: var(
  --wds-color-text-standard-secondary,
  var(--wsr-color-D20, #333853)
);
$text-primary: var(
  --wds-color-text-standard-primary,
  var(--wsr-color-D10, #000624)
);
$text-primary-light: var(
  --wds-color-text-standard-primary-light,
  var(--wsr-color-D80, #ffffff)
);
$text-disabled: var(
  --wds-color-text-disabled,
  var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
);
$fill-tertiary-hover: var(
  --wds-color-fill-standard-tertiary-hover,
  var(--wsr-color-B50, #e7f0ff)
);
$fill-dark-tertiary-hover: var(
  --wds-color-fill-dark-tertiary-hover,
  var(--wsr-color-D60, #dfe5eb)
);
/* stylelint-disable-next-line plugin/use-baseline */
$fill-transparent-secondary-hover: var(
  --wds-color-fill-transparent-secondary-hover,
  color-mix(in srgb, var(--wsr-color-D20, #333853) 54%, transparent)
);
$fill-destructive-tertiary-hover: var(
  --wds-color-fill-destructive-tertiary-hover,
  var(--wsr-color-R50, #fde3e1)
);
$fill-warning-tertiary-hover: var(
  --wds-color-fill-warning-tertiary-hover,
  var(--wsr-color-Y50, #fff0d1)
);
$fill-success-tertiary-hover: var(
  --wds-color-fill-success-tertiary-hover,
  var(--wsr-color-G50, #e1f4eb)
);

.tag {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  transition: background-color ease 300ms;
  /* stylelint-disable-next-line plugin/use-baseline */
  max-width: stretch;
  overflow: hidden;
  min-height: var(--wds-tag-size-tiny, var(--wds-space-300, 18px));

  &__thumb {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
  }

  &__remove-button {
    flex: 0 0 auto;
  }

  &--size-tiny {
    padding: 0 var(--wds-tag-padding-horizontal-tiny, var(--wds-space-150, 9px));
    border-radius: var(
      --wds-tag-border-radius-tiny,
      var(--wds-border-radius-full, 9px)
    );
    max-height: var(--wds-tag-size-tiny, var(--wds-space-300, 18px));
    height: var(--wds-tag-size-tiny, var(--wds-space-300, auto));
  }

  &--size-tiny#{&}--with-thumb {
    padding-inline-start: 3px;
  }

  &--size-tiny#{&}--with-remove-button {
    padding-inline-end: 3px;
  }

  &--size-tiny &__thumb {
    height: 12px;
    width: 12px;
    margin-inline-end: var(--wds-space-100, 6px);
  }

  &--size-small {
    padding: var(--wds-tag-padding-vertical-small, var(--wds-space-50, 3px))
      var(--wds-tag-padding-horizontal-small, var(--wds-space-200, 12px));
    border-radius: var(
      --wds-tag-border-radius-small,
      var(--wds-border-radius-full, 12px)
    );
    max-height: var(--wds-tag-size-small, var(--wds-space-400, 24px));
    height: var(--wds-tag-size-small, var(--wds-space-400, auto));
  }

  &--size-small#{&}--with-thumb {
    padding-inline-start: 3px;
  }

  &--size-small#{&}--with-remove-button {
    padding-inline-end: 3px;
  }

  &--size-small &__thumb {
    width: 18px;
    height: 18px;
    margin-inline-end: var(--wds-space-100, 6px);
  }

  &--size-small &__remove-button {
    margin-inline-start: var(--wds-space-100, 6px);
  }

  &--size-medium {
    padding: var(--wds-tag-padding-vertical-medium, var(--wds-space-100, 6px))
      var(--wds-tag-padding-horizontal-medium, var(--wds-space-200, 12px));
    border-radius: var(
      --wds-tag-border-radius-medium,
      var(--wds-border-radius-full, 15px)
    );
    max-height: var(--wds-tag-size-medium, var(--wds-space-500, 30px));
    height: var(--wds-tag-size-medium, var(--wds-space-500, auto));
  }

  &--size-medium#{&}--with-thumb {
    padding-inline-start: 6px;
  }

  &--size-medium#{&}--with-remove-button {
    padding-inline-end: 6px;
  }

  &--size-medium &__thumb {
    height: 18px;
    width: 18px;
    margin-inline-end: var(--wds-space-200, 12px);
  }

  &--size-medium &__remove-button {
    margin-inline-start: var(--wds-space-100, 6px);
  }

  &--size-large {
    padding: var(--wds-tag-padding-vertical-large, var(--wds-space-100, 6px))
      var(--wds-tag-padding-horizontal-large, var(--wds-space-300, 18px));
    border-radius: var(
      --wds-tag-border-radius-large,
      var(--wds-border-radius-full, 18px)
    );
    max-height: var(--wds-tag-size-large, var(--wds-space-600, 36px));
    height: var(--wds-tag-size-large, var(--wds-space-600, auto));
  }

  &--size-large#{&}--with-thumb {
    padding-inline-start: 6px;
  }

  &--size-large#{&}--with-remove-button {
    padding-inline-end: 6px;
  }

  &--size-large &__thumb {
    height: 24px;
    width: 24px;
    margin-inline-end: var(--wds-space-200, 12px);
  }

  &--size-large &__remove-button {
    margin-inline-start: var(--wds-space-200, 12px);
  }

  &--clickable {
    cursor: pointer;
  }

  &--skin-standard {
    background-color: var(
      --wds-tag-solid-standard-fill,
      var(--wds-color-fill-dark-secondary, var(--wsr-color-B40, #d6e6fe))
    );
  }

  @media (hover: hover) {
    &--skin-standard#{&}--hoverable:hover {
      background-color: var(
        --wds-color-fill-dark-secondary-hover,
        var(--wsr-color-B30, #a8caff)
      );
    }
  }

  &--skin-warning {
    background-color: var(
      --wds-tag-solid-warning-fill,
      var(--wds-color-fill-warning-secondary, var(--wsr-color-Y40, #ffe2a5))
    );
  }

  @media (hover: hover) {
    &--skin-warning#{&}--hoverable:hover {
      background-color: var(
        --wds-color-fill-warning-secondary-hover,
        var(--wsr-color-Y30, #ffd16e)
      );
    }
  }

  &--skin-error {
    background-color: var(
      --wds-tag-solid-error-fill,
      var(--wds-color-fill-destructive-secondary, var(--wsr-color-R40, #fbd0cd))
    );
  }

  @media (hover: hover) {
    &--skin-error#{&}--hoverable:hover {
      background-color: var(
        --wds-color-fill-destructive-secondary-hover,
        var(--wsr-color-R30, #f69891)
      );
    }
  }

  &--skin-dark {
    background-color: var(
      --wds-tag-solid-dark-fill,
      var(--wds-color-fill-dark-primary, var(--wsr-color-D20, #333853))
    );
    color: $text-primary-light;
  }

  @media (hover: hover) {
    &--skin-dark#{&}--hoverable:hover {
      background-color: var(
        --wds-color-fill-dark-primary-hover,
        var(--wsr-color-D10, #000624)
      );
    }
  }

  &--skin-neutral {
    background-color: var(
      --wds-tag-solid-neutral-fill,
      var(--wds-color-fill-dark-secondary, var(--wsr-color-D70, #eceff3))
    );
  }

  @media (hover: hover) {
    &--skin-neutral#{&}--hoverable:hover {
      background-color: var(
        --wds-color-fill-dark-secondary-hover,
        var(--wsr-color-D60, #dfe5eb)
      );
    }
  }

  &--skin-success {
    background-color: var(
      --wds-tag-solid-success-fill,
      var(--wds-color-fill-success-secondary, var(--wsr-color-G40, #c8e8d6))
    );
  }

  @media (hover: hover) {
    &--skin-success#{&}--hoverable:hover {
      background-color: var(
        --wds-color-fill-success-secondary-hover,
        var(--wsr-color-G30, #87cea5)
      );
    }
  }

  &--skin-light {
    background-color: var(
      --wds-tag-solid-light-fill,
      var(--wds-color-fill-light-primary, var(--wsr-color-D80, #ffffff))
    );
  }

  @media (hover: hover) {
    &--skin-light#{&}--hoverable:hover {
      background-color: var(
        --wds-color-fill-light-secondary-hover,
        var(--wsr-color-B50, #e7f0ff)
      );
    }
  }

  &--skin-light-outlined {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: var(--wds-border-width-100, 1px) solid
      var(--wds-color-border-standard-tertiary, var(--wsr-color-D60, #dfe5eb));
    outline-offset: -1px;
    background-color: var(
      --wds-color-fill-standard-tertiary,
      var(--wsr-color-D80, #ffffff)
    );
  }

  @media (hover: hover) {
    &--skin-light-outlined#{&}--hoverable:hover {
      background-color: $fill-tertiary-hover;
      outline-color: var(
        --wds-color-border-standard-tertiary-hover,
        var(--wsr-color-B30, #a8caff)
      );
    }
  }

  &--disabled {
    background-color: var(
      --wds-color-fill-standard-secondary-disabled,
      var(--wsr-color-D10-05, rgba(0, 6, 36, 0.05))
    );
    color: $text-disabled;
  }

  &--disabled#{&}--skin-light {
    background-color: var(
      --wds-color-fill-light-primary-disabled,
      var(--wsr-color-D80-30, rgba(255, 255, 255, 0.3))
    );
  }

  &--disabled#{&}--skin-light-outlined {
    background-color: var(
      --wds-color-fill-standard-tertiary-disabled,
      var(--wsr-color-D80-30, rgba(255, 255, 255, 0.3))
    );
  }

  &#{&}--disabled #{&}__remove-button {
    color: $text-disabled;
  }

  &--type-outlined,
  &--type-transparent {
    color: $text-secondary;
  }

  &#{&}--type-outlined #{&}__text,
  &#{&}--type-transparent #{&}__text {
    color: inherit;
  }

  &--type-outlined {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline-width: var(--wds-border-width-100, 1px);
    outline-style: solid;
    outline-offset: -1px;
  }

  &--type-outlined#{&}--skin-standard {
    outline-color: var(
      --wds-tag-outlined-standard-border-color,
      var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #d6e6fe))
    );
    background-color: var(
      --wds-tag-outlined-standard-fill,
      var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #ffffff))
    );
    color: var(--wds-tag-outlined-standard-label-color, $text-secondary);
  }

  @media (hover: hover) {
    &--type-outlined#{&}--skin-standard#{&}--hoverable:hover {
      outline-color: var(
        --wds-color-border-standard-secondary-hover,
        var(--wsr-color-B30, #a8caff)
      );
      background-color: $fill-tertiary-hover;
    }
  }

  &--type-outlined#{&}--skin-error {
    outline-color: var(
      --wds-tag-outlined-error-border-color,
      var(
        --wds-color-border-destructive-secondary,
        var(--wsr-color-R40, #fbd0cd)
      )
    );
    background-color: var(
      --wds-tag-outlined-error-fill,
      var(--wds-color-fill-destructive-tertiary, var(--wsr-color-D80, #ffffff))
    );
    color: var(--wds-tag-outlined-error-label-color, $text-secondary);
  }

  @media (hover: hover) {
    &--type-outlined#{&}--skin-error#{&}--hoverable:hover {
      outline-color: var(
        --wds-color-border-destructive-secondary-hover,
        var(--wsr-color-R30, #f69891)
      );
      background-color: $fill-destructive-tertiary-hover;
    }
  }

  &--type-outlined#{&}--skin-warning {
    outline-color: var(
      --wds-tag-outlined-warning-border-color,
      var(--wds-color-border-warning-secondary, var(--wsr-color-Y40, #ffe2a5))
    );
    background-color: var(
      --wds-tag-outlined-warning-fill,
      var(--wds-color-fill-warning-tertiary, var(--wsr-color-D80, #ffffff))
    );
    color: var(--wds-tag-outlined-warning-label-color, $text-secondary);
  }

  @media (hover: hover) {
    &--type-outlined#{&}--skin-warning#{&}--hoverable:hover {
      outline-color: var(
        --wds-color-border-warning-secondary-hover,
        var(--wsr-color-Y30, #ffd16e)
      );
      background-color: $fill-warning-tertiary-hover;
    }
  }

  &--type-outlined#{&}--skin-success {
    outline-color: var(
      --wds-tag-outlined-success-border-color,
      var(--wds-color-border-success-secondary, var(--wsr-color-G40, #c8e8d6))
    );
    background-color: var(
      --wds-tag-outlined-success-fill,
      var(--wds-color-fill-success-tertiary, var(--wsr-color-D80, #ffffff))
    );
    color: var(--wds-tag-outlined-success-label-color, $text-secondary);
  }

  @media (hover: hover) {
    &--type-outlined#{&}--skin-success#{&}--hoverable:hover {
      outline-color: var(
        --wds-color-border-success-secondary-hover,
        var(--wsr-color-G30, #87cea5)
      );
      background-color: $fill-success-tertiary-hover;
    }
  }

  &--type-outlined#{&}--skin-neutral {
    outline-color: var(
      --wds-tag-outlined-neutral-border-color,
      var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #dfe5eb))
    );
    background-color: var(
      --wds-tag-outlined-neutral-fill,
      var(--wds-color-fill-dark-tertiary, var(--wsr-color-D80, #ffffff))
    );
    color: var(--wds-tag-outlined-neutral-label-color, $text-secondary);
  }

  @media (hover: hover) {
    &--type-outlined#{&}--skin-neutral#{&}--hoverable:hover {
      outline-color: var(
        --wds-color-border-dark-secondary-hover,
        var(--wsr-color-D60, #dfe5eb)
      );
      background-color: $fill-dark-tertiary-hover;
    }
  }

  &--type-outlined#{&}--skin-dark {
    outline-color: var(
      --wds-tag-outlined-dark-border-color,
      var(--wds-color-border-dark-primary, var(--wsr-color-D40, #868aa5))
    );
    background-color: var(
      --wds-tag-outlined-dark-fill,
      var(--wds-color-fill-dark-tertiary, var(--wsr-color-D80, #ffffff))
    );
    color: var(--wds-tag-outlined-dark-label-color, $text-primary);
  }

  @media (hover: hover) {
    &--type-outlined#{&}--skin-dark#{&}--hoverable:hover {
      outline-color: var(
        --wds-color-border-dark-primary-hover,
        var(--wsr-color-D20, #333853)
      );
      background-color: $fill-dark-tertiary-hover;
    }
  }

  &--type-outlined#{&}--skin-light {
    outline-color: var(
      --wds-tag-outlined-light-border-color,
      var(
        --wds-color-border-light,
        var(--wsr-color-D80-50, rgba(255, 255, 255, 0.5))
      )
    );
    background-color: var(
      --wds-tag-outlined-light-fill,
      var(--wds-color-fill-light-secondary, transparent)
    );
    color: var(--wds-tag-outlined-light-label-color, $text-primary-light);
  }

  @media (hover: hover) {
    &--type-outlined#{&}--skin-light#{&}--hoverable:hover {
      outline-color: var(
        --wds-color-border-light-hover,
        var(--wsr-color-D80-70, rgba(255, 255, 255, 0.7))
      );
      background-color: $fill-transparent-secondary-hover;
    }
  }

  &--type-transparent {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
    background-color: transparent;
  }

  &--type-transparent#{&}--skin-standard {
    color: var(--wds-tag-transparent-standard-label-color, $text-secondary);
  }

  &--type-transparent#{&}--skin-dark {
    color: var(--wds-tag-transparent-dark-label-color, $text-primary);
  }

  &--type-transparent#{&}--skin-light {
    color: var(--wds-tag-transparent-light-label-color, $text-primary-light);
  }

  &--type-transparent#{&}--skin-neutral {
    color: var(
      --wds-tag-transparent-neutral-label-color,
      var(
        --wds-color-text-standard-secondary-light,
        var(--wsr-color-D40, #868aa5)
      )
    );
  }

  &--type-transparent#{&}--skin-error {
    color: var(
      --wds-tag-transparent-error-label-color,
      var(--wds-color-text-destructive, var(--wsr-color-R10, #e62214))
    );
  }

  &--type-transparent#{&}--skin-warning {
    color: var(
      --wds-tag-transparent-warning-label-color,
      var(--wds-color-text-warning, var(--wsr-color-Y10, #ffb700))
    );
  }

  &--type-transparent#{&}--skin-success {
    color: var(
      --wds-tag-transparent-success-label-color,
      var(--wds-color-text-success, var(--wsr-color-G10, #25a55a))
    );
  }

  @media (hover: hover) {
    &--type-transparent#{&}--skin-standard#{&}--hoverable:hover,
    &--type-transparent#{&}--skin-light-outlined#{&}--hoverable:hover {
      background-color: $fill-tertiary-hover;
    }

    &--type-transparent#{&}--skin-error#{&}--hoverable:hover {
      background-color: $fill-destructive-tertiary-hover;
    }

    &--type-transparent#{&}--skin-warning#{&}--hoverable:hover {
      background-color: $fill-warning-tertiary-hover;
    }

    &--type-transparent#{&}--skin-success#{&}--hoverable:hover {
      background-color: $fill-success-tertiary-hover;
    }

    &--type-transparent#{&}--skin-neutral#{&}--hoverable:hover,
    &--type-transparent#{&}--skin-dark#{&}--hoverable:hover {
      background-color: $fill-dark-tertiary-hover;
    }

    &--type-transparent#{&}--skin-light#{&}--hoverable:hover {
      background-color: $fill-transparent-secondary-hover;
    }
  }

  &--disabled#{&}--type-outlined {
    outline-color: var(
      --wds-color-border-standard-tertiary-disabled,
      var(--wsr-color-D10-10, rgba(0, 6, 36, 0.1))
    );
    background-color: var(
      --wds-color-fill-standard-tertiary-disabled,
      var(--wsr-color-D80-30, rgba(255, 255, 255, 0.3))
    );
  }

  &--disabled#{&}--type-outlined#{&}--skin-light {
    outline-color: var(
      --wds-color-border-light-disabled,
      var(--wsr-color-D80-30, rgba(255, 255, 255, 0.3))
    );
    background-color: var(
      --wds-color-fill-light-secondary-disabled,
      transparent
    );
  }

  &--disabled#{&}--type-transparent {
    background-color: transparent;
  }

  &--disabled#{&}--type-outlined,
  &--disabled#{&}--type-transparent {
    color: $text-disabled;
  }

  &--disabled#{&}--type-outlined#{&}--skin-light,
  &--disabled#{&}--type-transparent#{&}--skin-light {
    color: var(
      --wds-color-text-disabled-light,
      var(--wsr-color-D80-70, rgba(255, 255, 255, 0.7))
    );
  }
}