@use 'sass:color';

.ls-badge {
  $root: &;
  font-weight: normal;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: $hover-transition;

  &--sm {
    min-height: 2rem;
    font-size: 1.2rem;
    padding: 0 2 * $sp;

    &#{$root}--round {
      border-radius: 1rem;
    }
  }

  &--md {
    min-height: 3rem;
    padding: 0 3 * $sp;

    &#{$root}--round {
      border-radius: 1.5rem;
    }
  }

  &--lg {
    min-height: 4rem;
    padding: 0 4 * $sp;

    &#{$root}--round {
      border-radius: 2rem;
    }
  }

  &--disabled {
    color: color.adjust($color-disabled, $lightness: -20%);
    background-color: color.adjust($color-disabled, $lightness: 40%);
    pointer-events: none;
    border-color: $color-disabled;
  }
}