@layer components {
  /*
    分類のタグ。Highriseのタグ（実測: lists.md「Highrise タグの比較」2015〜2016年）と同じく、塗りの無い小さな四角に
    1px #dddddd の枠、角丸 約1.5px、#666666 の文字にする。行の地が透けるよう、面は塗らない。
    （2011年の丸いピルは下の縁だけ濃い線で、角丸と片側の線を組み合わせることになるので使わない。）
    一行の高さは20px（文字16px＋上下の余白と枠線2pxずつ。実測の16.5〜20pxの範囲）。
    色を指定したタグは、HighriseのDealsの色付きのタグ（「Hotels」#c50000）と同じく、その色の平らな塗りに白い文字にする。
    色はBadgeと同じ手本の塗り（白い文字と4.5:1に届くよう明るさを下げた値）を使う。
    強調するタグ（data-current="true"）はHighriseの絞り込み中のタグと同じ灰色の塗りに白い文字
    （実測 #848484 は白い文字と4.5:1に届かないので、明るさだけ下げて #747474）。
  */
  .rx-tag {
    --rx-tag-ink: var(--rx-muted);
    --rx-tag-face: transparent;
    --rx-tag-edge: #dddddd;
    display: inline-block;
    inline-size: fit-content;
    justify-self: start;
    max-inline-size: 100%;
    padding-block: calc(0.125rem - var(--rx-stroke-width));
    padding-inline: 0.375rem;
    border: var(--rx-stroke-width) solid var(--rx-tag-edge);
    border-radius: var(--rx-radius-mark);
    background: var(--rx-tag-face);
    color: var(--rx-tag-ink);
    font-family: var(--rx-control-font-family);
    font-size: var(--rx-small);
    font-weight: 400;
    line-height: var(--rx-small-leading);
    overflow-wrap: anywhere;
    text-decoration: none;
    &:is(
      [data-accent="blue"],
      [data-accent="green"],
      [data-accent="amber"],
      [data-accent="coral"]
    ) {
      --rx-tag-ink: var(--rx-surface);
      --rx-tag-edge: var(--rx-tag-face);
    }
    &[data-accent="blue"] {
      --rx-tag-face: #3e79ae;
    }
    &[data-accent="green"] {
      --rx-tag-face: #498235;
    }
    &[data-accent="amber"] {
      --rx-tag-face: #be561d;
    }
    &[data-accent="coral"] {
      --rx-tag-face: #c50000;
    }
    &[data-current="true"] {
      --rx-tag-ink: var(--rx-surface);
      --rx-tag-face: #747474;
      --rx-tag-edge: #747474;
    }
    /* 分類へ移動するタグは、ホバーすると枠を一段濃くし、淡い灰色の面を敷く（推測）。下線は引かない。 */
    &:is(a) {
      cursor: pointer;
      &:hover {
        border-color: color-mix(in srgb, var(--rx-tag-ink) 45%, var(--rx-tag-edge));
        background: var(--rx-gray-50);
        color: var(--rx-tag-ink);
        text-decoration: none;
      }
      /* 塗りのあるタグは、ホバーすると塗りを一段濃くする（推測）。 */
      &[data-accent]:hover {
        border-color: color-mix(in srgb, var(--rx-tag-face) 85%, var(--rx-ink));
        background: color-mix(in srgb, var(--rx-tag-face) 85%, var(--rx-ink));
        color: var(--rx-surface);
      }
      &[data-current="true"]:hover {
        border-color: var(--rx-gray-650);
        background: var(--rx-gray-650);
      }
      &:focus-visible {
        outline: 0.125rem solid var(--rx-focus-border);
        outline-offset: 0.125rem;
      }
    }
  }
  /* 解除できるタグは、末尾に×の小さな操作を置く。操作の高さをタグの内側に合わせ、タグの高さを変えない。 */
  .rx-tag.removable {
    --rx-button-size: 1.125rem;
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-inline-size: 0;
    padding-block: 0;
    padding-inline-end: 0;
    & > .remove {
      flex: none;
      border: 0;
      border-radius: var(--rx-radius-mark);
      background: transparent;
      color: inherit;
      box-shadow: none;
      &:hover:enabled {
        background: color-mix(in srgb, currentColor 12%, transparent);
        box-shadow: none;
      }
      &:active:enabled {
        box-shadow: none;
      }
      &:disabled {
        color: var(--rx-disabled-text);
      }
      /* 削除の×はタグの文字と同じ色にし、太字の形で小さくても見えるようにする。 */
      &::before {
        content: "";
        display: block;
        inline-size: 0.625rem;
        block-size: 0.625rem;
        background: currentColor;
        mask: url("../assets/x-bold.svg") center / contain no-repeat;
      }
    }
  }
}