/*
 * Small labelled boxes.
 *
 *   .badge--score-1 … 5   a news article's impact score (`news_score_classes`).
 *                         One ramp: 1–2 recede into the page, 3 is present, 4
 *                         carries the accent, 5 is solid and unmistakable.
 *   .badge                on its own, a news article's coverage flag
 *   .company-flag         an index membership, growth streak or insider alert
 *                         on a company header (`flag_classes`)
 *   .ticker               a ticker symbol set beside a company name
 */
@layer components {
  .badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-block-size: 1.625rem;
    padding-inline: var(--space-xs);
    border: var(--rule-width) solid var(--color-rule);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-raised);
    color: var(--color-ink-muted);
    font-family: var(--font-ui);
    font-size: var(--text-meta-xs);
    font-weight: var(--weight-medium);
    line-height: 1;
    white-space: nowrap;
  }

  .badge--score {
    min-inline-size: 1.625rem;
    padding-inline: 0;
    font-size: var(--text-ui-sm);
    font-weight: var(--weight-semibold);
  }

  .badge--score-1 {
    background-color: var(--color-surface);
    color: var(--color-ink-subtle);
  }

  .badge--score-2 {
    color: var(--color-ink-muted);
  }

  .badge--score-3 {
    border-color: var(--color-rule-strong);
    color: var(--color-ink);
  }

  .badge--score-4 {
    border-color: var(--color-accent-line);
    background-color: var(--color-accent-tint);
    color: var(--color-accent-strong);
  }

  .badge--score-5 {
    border-color: var(--color-accent-strong);
    background-color: var(--color-accent-strong);
    color: var(--color-ink-inverse);
  }

  .company-flag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-block-size: 2rem;
    padding-inline: var(--space-sm);
    border: var(--rule-width) solid var(--color-rule-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: var(--text-ui-sm);
    font-weight: var(--weight-medium);
    line-height: 1.2;
    white-space: nowrap;

    /* The label is a link to the screener of every company carrying the flag;
       the whole badge is its target, 44px tall on touch. */
    & a {
      color: inherit;
      text-decoration: none;

      &::after {
        content: "";
        position: absolute;
        inset: 0;

        @media (pointer: coarse) {
          inset-block: -0.375rem;
        }
      }
    }

    &:has(a:hover) {
      border-color: var(--color-rule-control);
      background-color: var(--color-surface-raised);
    }
  }

  .company-flag--growth {
    border-color: var(--color-gain-line);
    background-color: var(--color-gain-tint);
    color: var(--color-gain-strong);

    &:has(a:hover) {
      border-color: var(--color-gain);
      background-color: var(--color-gain-tint);
    }
  }

  .company-flag--insiders {
    border-color: var(--color-warn-line);
    background-color: var(--color-warn-tint);
    color: var(--color-warn);

    &:has(a:hover) {
      border-color: var(--color-warn);
      background-color: var(--color-warn-tint);
    }
  }

  /* The flag set small, as a swatch in the legend under the badges. */
  .company-flag--small {
    min-block-size: 1.375rem;
    padding-inline: var(--space-xs);
    font-size: var(--text-meta-xs);
  }

  .ticker {
    display: inline-flex;
    align-items: center;
    block-size: 1.625rem;
    padding-inline: var(--space-xs);
    border: var(--rule-width) solid var(--color-rule);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-raised);
    color: var(--color-ink-soft);
    font-family: var(--font-ui);
    font-size: var(--text-ui-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.05em;
    vertical-align: middle;
  }
}