.ds-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-050);
  padding: var(--spacing-150);
  width: fit-content;

  > img {
    width: 24px;
    height: 24px;
  }

  > sup {
    font-size: 8px;
  }

  &:hover {
    background-color: var(--layer-hover-1);
  }

  &.disabled {
    background-color: var(--layer-disabled) !important;
    color: var(--text-on-disabled) !important;
  }

  &.large {
    @include tag-large-1;
    line-height: 20px;
    padding: var(--spacing-050) var(--spacing-100);
  }

  &.medium {
    @include tag-medium-1;
    line-height: 16px;
    padding: var(--spacing-050) var(--spacing-100);
  }

  &.small {
    @include tag-small-1;
    line-height: 14px;
    padding: var(--spacing-050);
  }

  &.low {
    color: var(--text-on-color-dark);
  }

  &.accent {
    color: var(--text-on-color-light);
  }

  &.gray.low {
    background-color: var(--tag-gray-low);
  }

  &.gray.accent {
    background-color: var(--tag-gray-accent);
  }

  &.blue.low {
    background-color: var(--tag-blue-low);
    color: var(--text-on-color-accent);
  }

  &.blue.accent {
    background-color: var(--tag-blue-accent);
  }

  &.green.low {
    background-color: var(--tag-green-low);
  }

  &.green.accent {
    background-color: var(--tag-green-accent);
  }

  &.red.low {
    background-color: var(--tag-red-low);
  }

  &.red.accent {
    background-color: var(--tag-red-accent);
  }

  &.yellow.low {
    background-color: var(--tag-yellow-low);
  }

  &.yellow.accent {
    background-color: var(--tag-yellow-accent);
  }

  &.violet.low {
    background-color: var(--tag-violet-low);
  }

  &.violet.accent {
    background-color: var(--tag-violet-accent);
  }
}
