/*
  Rubber stamps for a card's standing. Tone modifiers set the --stamp-color slot;
  `.stamped-head` sets one beside a card title.
*/
@layer components {
  .stamp {
    --stamp-color: color-mix(in oklch, var(--color-primary) 70%, transparent);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    flex-shrink: 0;
    min-inline-size: 7rem;
    padding: 0.5rem 1rem;
    border: 2px solid var(--stamp-color);
    border-radius: var(--radius-sm);
    background-color: color-mix(in oklch, var(--stamp-color) 8%, var(--color-white));
    box-shadow:
      inset 0 0 0 2px var(--color-white-90),
      inset 0 0 0 3px color-mix(in oklch, var(--stamp-color) 35%, transparent),
      0 1px 2px rgb(0 0 0 / 0.06);
    text-align: center;
    pointer-events: none;
    user-select: none;
  }

  .stamp--positive { --stamp-color: color-mix(in oklch, var(--color-positive) 80%, transparent); }
  .stamp--negative { --stamp-color: color-mix(in oklch, var(--color-negative) 80%, transparent); }
  .stamp--muted { --stamp-color: color-mix(in oklch, var(--color-text-muted) 70%, transparent); }

  .stamp__title {
    font-size: var(--text-base);
    line-height: 1.25;
    font-weight: var(--font-weight-extrabold);
    letter-spacing: 0.12em;
    margin-right: -0.12em;
    text-transform: uppercase;
    color: var(--stamp-color);
    text-shadow: 0 1px 0 var(--color-white-90);
  }

  .stamp__date {
    font-size: var(--text-2xs);
    line-height: 1.25;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .stamp__by {
    font-size: var(--text-2xs);
    line-height: 1.25;
    color: var(--color-text-muted);
  }

  .stamped-head {
    --card-head-align: center;

    justify-content: flex-start;
    gap: 1.25rem;
  }

  .stamped-head--positive {
    --card-head-bg: var(--color-green-50);
  }

  .stamped-head--negative {
    --card-head-bg: var(--color-red-50);
  }

  .stamped-head__text {
    margin-top: 0.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-text-muted);

    strong {
      font-weight: var(--font-weight-semibold);
      color: var(--color-text);
    }
  }
}