@use 'Tag.odeditor-dark.module';

.tag {
  &--skin-standard {
    background-color: var(
      --wds-tag-solid-standard-fill,
      var(--wds-color-fill-standard-secondary)
    );
  }

  &--type-outlined#{&}--skin-standard {
    outline-color: var(
      --wds-tag-outlined-standard-border-color,
      var(--wds-color-blue-250)
    );
    background-color: var(
      --wds-tag-outlined-standard-fill,
      var(--wds-color-blue-500)
    );
  }

  &--type-outlined#{&}--skin-error {
    outline-color: var(
      --wds-tag-outlined-error-border-color,
      var(--wds-color-red-200)
    );
    background-color: var(--wds-tag-outlined-error-fill, var(--wds-color-red-600));
  }

  &--type-outlined#{&}--skin-warning {
    outline-color: var(
      --wds-tag-outlined-warning-border-color,
      var(--wds-color-yellow-200)
    );
    background-color: var(
      --wds-tag-outlined-warning-fill,
      var(--wds-color-yellow-500)
    );
  }

  &--type-outlined#{&}--skin-success {
    outline-color: var(
      --wds-tag-outlined-success-border-color,
      var(--wds-color-green-200)
    );
    background-color: var(
      --wds-tag-outlined-success-fill,
      var(--wds-color-green-500)
    );
  }

  &--type-outlined#{&}--skin-neutral {
    outline-color: var(
      --wds-tag-outlined-neutral-border-color,
      var(--wds-color-black-500)
    );
    background-color: var(--wds-tag-outlined-neutral-fill, var(--wds-color-white));
  }

  &--type-outlined#{&}--skin-dark {
    outline-color: var(
      --wds-tag-outlined-dark-border-color,
      var(--wds-color-fill-dark-primary)
    );
    background-color: var(
      --wds-tag-outlined-dark-fill,
      var(--wds-color-black-100-transparent-0)
    );
  }

  &--type-outlined#{&}--skin-light {
    outline-color: var(
      --wds-tag-outlined-light-border-color,
      var(--wds-color-fill-light-primary)
    );
  }

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

  &--type-transparent#{&}--skin-warning {
    color: var(
      --wds-tag-transparent-warning-label-color,
      var(--wds-color-yellow-0)
    );
  }

  &--type-transparent#{&}--skin-success {
    color: var(
      --wds-tag-transparent-success-label-color,
      var(--wds-color-green-50)
    );
  }

  &--disabled {
    background-color: var(--wds-color-fill-standard-secondary-disabled);
  }

  &--disabled#{&}--type-outlined {
    outline-color: var(--wds-color-border-standard-tertiary-disabled);
    background-color: var(--wds-color-fill-standard-tertiary-disabled);
  }

  &--disabled#{&}--type-outlined,
  &--disabled#{&}--type-transparent {
    color: var(--wds-color-text-disabled);
  }
}