@layer components {
  /*
    状態のラベル。実測: lists.md「Highrise Latest activity（2011）」の「WON」と作業の種類のラベル（Email・Lunch・Ship・Follow-up）、
    「Highrise Latest activity（2016）」の「CREATED」。平らな濃い塗りに白い太字、角は四角に近い（角丸2〜3px）。
    BC2のピル（件数・担当者と期日）は状態には使わない。高さは18px（手本の16〜21pxの間）、文字はRetrixの段の11px。
    塗りは手本の色を使い、白い文字と4.5:1に届かない色だけ、色合いを保って明るさを下げる。
    - 中立: 「CREATED」の #323232
    - 情報: 「Follow-up」の #4a87be → #3e79ae
    - 成功: 「WON」の #51913b → #498235
    - 注意: 「Email」の #de6523 → #be561d
    - 危険: Dealsの色付きのタグ「Hotels」の #c50000
    - 下書き: 役割を持たせず、Highriseの絞り込み中のタグの灰色 #848484 → #757575
  */
  .rx-badge {
    --rx-badge-face: #323232;
    display: inline-grid;
    inline-size: fit-content;
    justify-self: start;
    align-items: start;
    max-inline-size: 100%;
    /*
      一行の高さは18px。折り返した行の間（行の余り2つ分）と、上下の縁から文字まで（余白＋行の余り）を
      同じにするため、行の高さを「一行の高さと文字の大きさの間」に詰め、残りを上下に半分ずつ取る。
    */
    padding-block: calc((1.125rem - 1lh) / 2);
    padding-inline: 0.375rem;
    border-radius: var(--rx-radius-mark);
    background: var(--rx-badge-face);
    /* 透明な輪郭は、強制カラーで背景が消えた時だけ見える縁になる。 */
    outline: var(--rx-stroke-width) solid transparent;
    outline-offset: calc(var(--rx-stroke-width) * -1);
    color: var(--rx-surface);
    font-family: var(--rx-control-font-family);
    font-size: var(--rx-small);
    font-weight: 700;
    line-height: calc((1.125rem + 1em) / 2);
    overflow-wrap: anywhere;
    /* 日本語は文節の切れ目で折り返し、行末に一、二文字だけを残さない。 */
    word-break: auto-phrase;
    &[data-tone="info"] {
      --rx-badge-face: #3e79ae;
    }
    &[data-tone="success"] {
      --rx-badge-face: #498235;
    }
    &[data-tone="warning"] {
      --rx-badge-face: #be561d;
    }
    &[data-tone="danger"] {
      --rx-badge-face: #c50000;
    }
    /* 下書きは役割の色を持たせず、灰色にする。 */
    &[data-draft="true"] {
      --rx-badge-face: #757575;
    }
    /* タイルのアイコンの上などに重ねる小さなバッジ。一行の高さは16px。 */
    &[data-size="small"] {
      padding-block: 0;
      padding-inline: 0.25rem;
      font-size: 0.625rem;
      line-height: 1rem;
    }
  }
}