/* The admin-state status pill. Admin pages, the account page, and the map
   all show it, so it lives here rather than in admin-only CSS. */
@layer components {
  .admin-state {
    display: inline-flex;
    justify-self: start;
    align-items: center;
    gap: .35rem;
    min-block-size: 1.8rem;
    padding-inline: .6rem;
    border: .0625rem solid var(--color-line);
    border-radius: 999px;
    background: var(--color-panel-soft);
    color: var(--color-navy-soft);
    font-family: var(--font-meta);
    font-size: .68rem;
    font-weight: 750;
  }

  .admin-state .nabry-icon {
    inline-size: .85rem;
    block-size: .85rem;
    stroke-width: 2.2;
  }

  /* Each color carries one meaning, in white text. Unmodified pills are
     neutral: inactive or closed. Orange stays reserved for actions, so it
     never marks a status. */
  .admin-state.is-positive {
    border-color: var(--color-logo-green);
    background: var(--color-logo-green);
    color: var(--color-white);
  }

  .admin-state.is-attention {
    border-color: var(--color-logo-yellow);
    background: var(--color-logo-yellow);
    color: var(--color-white);
  }

  .admin-state.is-progress {
    border-color: var(--color-logo-blue);
    background: var(--color-logo-blue);
    color: var(--color-white);
  }

  .admin-state.is-membership {
    border-color: var(--color-logo-purple);
    background: var(--color-logo-purple);
    color: var(--color-white);
  }

  .admin-state.is-critical {
    border-color: var(--color-danger);
    background: var(--color-danger);
    color: var(--color-white);
  }
}