// --- Labels
.label {
  display: inline-flex;
  overflow: hidden;
  min-width: 2rem;
  height: 2rem;
  border: 1px solid colors('base300');
  border-radius: 0.4rem;
  padding: 0 0.8rem;
  align-items: center;
  justify-content: center;
  color: colors('base900');
  background-color: colors('base200');
  font-size: 1.2rem;
  line-height: 1;
  white-space: nowrap;

  .counter {
    margin-left: 0.4rem;
    border-radius: 1rem;
    color: colors('base900');
    background-color: colors('white');
  }

  .remove {
    display: flex;
    margin-left: 0.8rem;
    align-items: center;
    justify-content: flex-end;
    color: rgba(colors('base900'), 0.4);
    cursor: pointer;

    .fa {
      font-size: 1rem;
    }
  }

  &.empty {
    border: 1px solid colors('base900');
    color: colors('base900');
    background-color: transparent;

    .counter {
      color: colors('white');
      background-color: colors('base900');
    }

    .remove {
      color: rgba(colors('base900'), 0.4);

      &:hover {
        color: rgba(colors('base900'), 0.8);
      }
    }
  }

  @each $status, $color in $default-status {
    $label-status-color: nth($color, 1);
    $label-foreground: darken(
      $color: $label-status-color,
      $amount: 15%
    );
    $label-background: lighten(
      $color: $label-status-color,
      $amount: 30%
    );

    &.#{$status} {
      border-color: $label-status-color;
      color: $label-foreground;
      background-color: $label-background;

      .counter {
        color: $label-status-color;
      }

      .remove {
        color: darken($color: $label-status-color, $amount: 10%);

        &:hover {
          color: darken($color: $label-status-color, $amount: 15%);
        }
      }

      &.empty {
        border: 1px solid $label-status-color;
        color: $label-status-color;
        background-color: transparent;

        .counter {
          color: $label-status-color;
          background-color: $label-background;
        }

        .remove {
          color: darken($color: $label-status-color, $amount: 10%);

          &:hover {
            color: darken($color: $label-status-color, $amount: 15%);
          }
        }
      }
    }
  }
}

// --- Badges
.badge {
  @extend .label;
  border-radius: 2.5rem;
  padding: 0 1.6rem;

  &.default {
    border-radius: 2.5rem;
  }
}