$root: tag;

.#{$root} {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;

  &--chip {
    border-radius: var(--tag-chip-border-radius);
    padding: var(--tag-chip-padding);

    &.#{$root}--accent-color {
      border: var(--tag-chip-accent-border);
      background-color: var(--tag-chip-accent-bg-color);
      color: var(--tag-chip-accent-text-color);
    }

    &.#{$root}--small-size {
      font-size: 11px;
    }
  }

  &--contained {
    color: var(--tag-contained-text-color);
    min-width: 13px;
    line-height: 20px;
    border-radius: var(--tag-contained-border-radius, 10px);
    padding: 0 8px;

    &.#{$root}--fog-color {
      background-color: var(--tag-contained-fog-bg-color);
    }

    &.#{$root}--primary-color {
      background-color: var(--tag-contained-primary-bg-color);
    }
  }

  &--bold {
    font-weight: var(--tag-bold-font-weight);

    &.#{$root}--medium-size {
      font-size: 14px;
    }

    &.#{$root}--fog-color {
      color: var(--tag-bold-fog-text-color);
    }

    &.#{$root}--primary-color {
      color: var(--tag-bold-primary-text-color);
    }
  }

  &--right-margin {
    margin-right: 7px;

    [dir=rtl] & {
      margin-right: 0;
      margin-left: 7px;
    }
  }
}
