@import "../main.css";

@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: unset;
    width: fit-content;
    max-width: 100%;
    font-size: calc(var(--text-ui) * 0.8);
    line-height: var(--text-ui--line-height);
    font-weight: var(--font-weight-ui);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-ui--border);
    padding-inline: var(--spacing-mini-padding);
    gap: var(--spacing-mini-gap);
    height: calc(var(--spacing-ui) * 0.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    color: var(--color-ui--text);
    background-color: var(--color-ui);

    &:disabled,
    &[data-disabled],
    &[data-disabled="true"],
    &[disabled="true"] {
      color: var(--color-ui--muted);
      background-color: --alpha(var(--color-ui) / 60%);
      cursor: not-allowed;
    }

    & svg {
      @apply ui-icon;

      padding: 0;
    }
  }

  .badge.badge--square,
  .badge.badge--circle {
    display: inline-flex;
    aspect-ratio: 1 / 1;
    justify-content: center;
    align-items: center;
    width: auto;
    padding: 0;
  }

  .badge.badge--circle {
    border-radius: var(--radius-full);
  }
}

@utility badge--* {
  font-size: calc(--value(--text-ui-*, [length]) * 0.8);
  line-height: calc(--value(--text-ui-* --line-height, [length]) * 0.8);
  height: calc(--value(--spacing-ui-*, [length]) * 0.8);
  background-color: --value(--color-ui-*, [color]);
  color: --value(--color-ui-* --text, [color]);
  padding-inline: calc(--value(--spacing-mini-padding-*, [length]) * 0.8);
  gap: calc(--value(--spacing-mini-gap-*, [length]) * 0.8);

  :disabled,
  [data-disabled] {
    color: --value(--color-ui-* --muted, [color]);
    background-color: --alpha(--value(--color-ui-*, [color]) / 60%);
  }
}