.ds-pill {
  display: flex;
  align-items: center;
  border-radius: var(--radius-full);
  gap: var(--spacing-050);
  cursor: pointer;

  &.filled {
    color: var(--text-on-color-light);
    border: 1px solid var(--tag-blue-accent);
    background-color: var(--tag-blue-accent);

    .ds-icon {
      color: var(--text-on-color-light);
    }

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

      .ds-icon {
        color: var(--text-on-color-accent);
      }
    }

    &.active {
      background-color: var(--button-primary-active);
      border-color: var(--button-primary-active);
    }
  }

  &.outlined {
    color: var(--text-accent);
    border: 1px solid var(--tag-blue-accent);

    .ds-icon {
      color: var(--text-accent);
    }

    &:hover {
      color: var(--text-accent);
      background-color: var(--layer-field-hover);
      border-color: var(--layer-field-hover);
    }

    &.active {
      background-color: var(--layer-field-active);
      border-color: var(--layer-field-active);
    }
  }

  &.small {
    @include tag-small-1;
    padding: var(--spacing-050) var(--spacing-050) var(--spacing-050)
      var(--spacing-100);
  }

  &.medium {
    @include tag-medium-1;
    padding: var(--spacing-100) var(--spacing-100) var(--spacing-100)
      var(--spacing-150);
  }

  &.large {
    @include tag-large-1;
    padding: var(--spacing-100) var(--spacing-150) var(--spacing-100)
      var(--spacing-200);
  }
}
