// Label — a small, boxed piece of text (badge / tag).
//
// Orthogonal modifiers, freely combinable:
//   Size:   (default = large)          .label--sm
//   Weight: (default = bold, uppercase) .label--subtle  (regular, sentence case)
//   Style:  (default = solid fill)      .label--outline
//   Color:  .label--primary  .label--secondary  .label--green  .label--neutral
//
// Examples:
//   <span class="label label--secondary">Neu</span>
//   <span class="label label--sm label--outline label--neutral">Entwurf</span>

.label {
  @extend %heading-font-bold;

  display: inline-block;
  padding: $spacer-xs;
  font-size: $font-size-base;
  text-transform: uppercase;

  // Size
  &--sm {
    padding: $spacer-xxs;
    font-size: $font-size-xs;
  }

  // Weight / case
  &--subtle {
    font-weight: normal;
    text-transform: none;
  }

  // Colors (solid fill)
  &--primary {
    color: $label-primary-text-color;
    background-color: $label-primary-bg-color;
  }

  &--secondary {
    color: $label-secondary-text-color;
    background-color: $label-secondary-bg-color;
  }

  &--green {
    color: $label-green-text-color;
    background-color: $label-green-bg-color;
  }

  &--neutral {
    color: $label-neutral-text-color;
    background-color: $label-neutral-bg-color;
  }

  // Style: outline — text and border take the color, background is transparent
  &--outline {
    background-color: transparent;
    border: 4px solid currentcolor;

    &.label--primary {
      color: $label-primary-bg-color;
    }

    &.label--secondary {
      color: $label-secondary-bg-color;
    }

    &.label--green {
      color: $label-green-bg-color;
    }

    &.label--neutral {
      color: $label-neutral-bg-color;
    }
  }
}

// -----------------------------------------------------------------------------
// Deprecated aliases — kept so existing markup keeps rendering identically.
// Prefer the .label + modifier API above for new code.
// -----------------------------------------------------------------------------

// Old large label -> new base
.label-big {
  @extend .label;

  &.badge {
    @extend .label--primary;
  }

  &.badge--inverted {
    @extend .label--secondary;
  }

  &.hint {
    @extend .label--outline;
    @extend .label--primary;
  }
}

// Old small "slides available" tag: small, green, regular weight, sentence case
.label.green {
  @extend .label--sm;
  @extend .label--green;
  @extend .label--subtle;
}

// Breakpoints
@media screen and (min-width: $grid-breakpoint-md) {
  .label {
    margin-right: $spacer-xxs;
  }
}