@use "../base/mixins" as *;
@use "../base/variables" as *;

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0 1.4rem;
  height: 3.2rem;
  border-radius: 10rem;
  font-weight: 600;
  white-space: nowrap;

  @include media("lg") {
    @include typography("p2");

    padding: 0 0.8rem;
    height: 2.4rem;
  }

  &--line {
    border: 1px solid;
    font-weight: 400;
  }
  &--up {
    background-color: theme-rgba($primary, 0.12);
    border-color: theme-rgba($primary, 0.6);
    color: theme-color($primary);
  }

  &--down {
    background-color: theme-rgba($secondary, 0.12);
    border-color: theme-rgba($secondary, 0.6);
    color: theme-color($secondary);
  }

  &--warning {
    background-color: theme-rgba($warning, 0.12);
    border-color: theme-rgba($warning, 0.6);
    color: theme-color($warning);
  }

  &--chart {
    padding: 0;
    width: 2rem;
    height: 2rem;

    &::before {
      --ico-size: 1.2rem;
    }
  }

  &--sm {
    @include typography("p3");

    padding: 0 0.6rem;
    height: 2rem;
  }

  &--md {
    @include typography("p2");

    padding: 0 0.8rem;
    height: 2.6rem;
  }
}