/* ==========================================================================
 * Badge
 * ========================================================================== */

.mds-c-badge {
  @mixin mds-m-label--size-xs;

  --mds-v-badge__border-width: 1px;
  --mds-v-badge__height: 20px; /* depends on label size */
  --mds-v-badge__padding--horizontal: var(--mds-d-spacing--xs);
  --mds-v-badge__padding--vertical: var(--mds-d-spacing--xs);

  align-items: center;
  background-color: var(--mds-v-badge__background-color);
  border-radius: var(--mds-d-border-radius--default);
  color: var(--mds-t-text-color--primary);
  display: inline-flex;
  height: var(--mds-v-badge__height);
  justify-content: center;
  letter-spacing: var(--mds-d-letter-spacing--narrow);
  max-width: 100%;
  min-width: var(--mds-v-badge__height);
  padding: var(--mds-v-badge__padding--vertical)
    var(--mds-v-badge__padding--horizontal);
  position: relative;

  &--theme-primary {
    --mds-v-badge__background-color: var(--mds-t-color--neutral-intense);
    --mds-v-badge__border-color: var(--mds-t-color--neutral);

    color: var(--mds-t-text-color--inverse-primary);
  }

  &--theme-secondary {
    --mds-v-badge__background-color: var(--mds-t-color--neutral);
    --mds-v-badge__border-color: var(--mds-t-color--neutral-intense);

    color: #fff;
  }

  &--theme-tertiary {
    --mds-v-badge__background-color: var(--mds-t-color--neutral-muted);
    --mds-v-badge__border-color: var(--mds-t-color--neutral);

    color: var(--mds-t-text-color--primary);
  }

  &--theme-blue {
    --mds-v-badge__background-color: var(--mds-t-color--blue);
    --mds-v-badge__border-color: var(--mds-t-color--blue--dark);

    color: #fff;
  }

  &--theme-green {
    --mds-v-badge__background-color: var(--mds-t-color--green);
    --mds-v-badge__border-color: var(--mds-t-color--green--dark);

    color: #fff;
  }

  &--theme-orange {
    --mds-v-badge__background-color: var(--mds-t-color--orange);
    --mds-v-badge__border-color: var(--mds-t-color--orange--dark);

    color: #fff;
  }

  &--theme-pink {
    --mds-v-badge__background-color: var(--mds-t-color--pink);
    --mds-v-badge__border-color: var(--mds-t-color--pink-dark);

    color: #fff;
  }

  &--theme-purple {
    --mds-v-badge__background-color: var(--mds-t-color--purple);
    --mds-v-badge__border-color: var(--mds-t-color--purple-dark);

    color: #fff;
  }

  &--theme-red {
    --mds-v-badge__background-color: var(--mds-t-color--red);
    --mds-v-badge__border-color: var(--mds-t-color--red--dark);

    color: #fff;
  }

  &--theme-yellow {
    --mds-v-badge__background-color: var(--mds-t-color--yellow);
    --mds-v-badge__border-color: var(--mds-t-color--yellow-dark);

    color: var(--mds-t-text-color--primary);
  }

  &--theme-inactive {
    --mds-v-badge__background-color: var(--mds-d-color-slate--200);

    color: #fff;
  }

  &--truncated {
    max-width: 8rem;
  }

  &--color-light-red {
    background-color: var(--mds-d-color-red--50);
    color: var(--mds-d-color-slate-900);
  }

  &--color-light-orange {
    background-color: var(--mds-d-color-orange--50);
    color: var(--mds-d-color-slate-900);
  }

  &--color-light-green {
    background-color: var(--mds-d-color-green--50);
    color: var(--mds-d-color-slate-900);
  }

  &--color-light-blue {
    background-color: var(--mds-d-color-blue--50);
    color: var(--mds-d-color-slate-900);
  }

  &--color-light-purple {
    background-color: var(--mds-d-color-purple--50);
    color: var(--mds-d-color-slate-900);
  }

  &--color-red {
    background-color: var(--mds-d-color-red--500);
    color: #fff;
  }

  &--color-orange {
    background-color: var(--mds-d-color-orange--500);
    color: #fff;
  }

  &--color-green {
    background-color: var(--mds-d-color-green--500);
    color: #fff;
  }

  &--color-blue {
    background-color: var(--mds-d-color-blue--500);
    color: #fff;
  }

  &--color-purple {
    background-color: var(--mds-d-color-purple--500);
    color: #fff;
  }

  &--color-light-gray {
    background-color: var(--mds-d-color-slate--100);
    color: var(--mds-d-color-slate-900);
  }

  &--color-mid-gray {
    background-color: var(--mds-d-color-slate--300);
    color: var(--mds-d-color-slate-900);
  }

  &--color-dark-gray-1 {
    background-color: var(--mds-d-color-slate--500);
    color: #fff;
  }

  &--color-dark-gray-2 {
    background-color: var(--mds-d-color-slate--600);
    color: #fff;
  }

  &--color-black {
    background-color: var(--mds-d-color-slate--700);
    color: #fff;
  }

  > *:first-child:not(.mds-c-badges) {
    margin-left: calc(var(--mds-d-spacing--xxs) * 0.5);
  }

  > *:last-child:not(.mds-c-badges) {
    margin-right: calc(var(--mds-d-spacing--xxs) * 0.5);
  }

  > .mds-c-dot:not(:last-child) {
    margin-right: calc(var(--mds-d-spacing--xxs) * -1);
  }

  > .mds-c-icon {
    height: var(--mds-d-font-size--sm);
    width: var(--mds-d-font-size--sm);

    &:only-child {
      margin-left: 0;
      margin-right: 0;
    }
  }

  .mds-c-badges .mds-c-badges & + & {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;

    &::before {
      background-color: var(--mds-v-badge__border-color);
      content: '';
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 1px;
      z-index: 1;
    }
  }

  .mds-c-badges .mds-c-badges &:not(:last-child) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
}

.mds-c-badge__text {
  @mixin mds-m-text-overflow-ellipsis;

  flex: 1;

  &:not(:first-child) {
    margin-left: var(--mds-d-spacing--xs);
  }

  &:not(:last-child) {
    margin-right: var(--mds-d-spacing--xs);
  }
}

.mds-c-badge--wrap {
  height: auto;
  min-height: var(--mds-v-badge__height);
  padding: var(--mds-d-spacing--xxs) var(--mds-v-badge__padding--horizontal);

  .mds-c-badge__text {
    flex: initial;
    line-height: 1.3;
    overflow: visible;
    overflow-wrap: break-word;
    text-align: left;
    text-overflow: initial;
    white-space: normal;
    word-wrap: break-word;
  }
}