@layer components {
  /* A small language flag (see LocalesHelper#locale_flag). Contexts that need
     a different size override .flag with their own class. */
  .flag {
    display: inline-block;
    inline-size: 0.8rem;
    block-size: auto;
    border-radius: 2px;
    vertical-align: middle;
  }

  .locale-flags {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-half);
  }

  /* Admin-list dimming: scheduled and unreleased (its language still a draft) dimmed, draft greyed
     (published = full colour). */
  .flag--scheduled, .flag--unreleased { opacity: 0.5; }
  .flag--draft { opacity: 0.35; filter: grayscale(100%); }
}