@use "../theme";

.badge {
  display: inline flow-root;
  border-radius: theme.border-radius("3xl");
  transition-property: color, background-color, border-color;
  transition-duration: 100ms;
  transition-timing-function: linear;
  white-space: nowrap;
  border-width: 1px;
  border-style: solid;

  &[data-size="xs"] {
    line-height: theme.spacing(4);
    height: theme.spacing(4);
    padding: 0 theme.spacing(2);
    font-size: theme.font-size("xxs");
    font-weight: theme.font-weight("medium");
  }

  &[data-size="md"] {
    line-height: theme.spacing(6);
    height: theme.spacing(6);
    padding: 0 theme.spacing(3);
    font-size: theme.font-size("xs");
    font-weight: theme.font-weight("medium");
  }

  &[data-size="lg"] {
    line-height: theme.spacing(9);
    height: theme.spacing(9);
    padding: 0 theme.spacing(5);
    font-size: theme.font-size("sm");
    font-weight: theme.font-weight("semibold");
  }

  @each $variant in ("neutral", "info", "warning", "error", "data", "success") {
    &[data-variant="#{$variant}"] {
      border-color: theme.color("states", $variant, "normal");

      &[data-style="filled"] {
        background: theme.color("states", $variant, "normal");
      }

      &[data-style="outline"] {
        color: theme.color("states", $variant, "normal");
      }
    }
  }

  &[data-variant="muted"] {
    border-color: theme.color("muted");

    &[data-style="filled"] {
      background: theme.color("muted");
    }

    &[data-style="outline"] {
      color: theme.color("muted");
    }
  }

  &[data-style="filled"] {
    color: theme.color("background", "primary");
  }
}