@layer components {
  /*
    コピーして使う値の欄。読み取り専用のInput（field.css。実測: controls.md 6a、高さ 24px）の末尾に、
    控えめなボタン（実測: controls.md 1、高さ 22px）を置き、高さの違う二つの上下の中央をそろえる。
    コピーするとアイコンがチェックに変わり、しばらくして元のアイコンに戻る。コピーできなかった時は欄の下に理由を出す。
    手本に同じ部品は無い（推測）。BC2はメールで追加する宛先を太字のリンクで見せ、下に灰色の注意を置くだけ
    （screenshots/basecamp2-official/bc2-help-adding-items-through-email-02.png）。ここでは選んでコピーしやすいよう欄に入れる。
  */
  .rx-copy-field {
    min-inline-size: 0;
    & > .rx-field > .row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--rx-space-2);
      min-inline-size: 0;
      & > .rx-input {
        flex: 1 1 10rem;
        min-inline-size: 0;
        font-variant-numeric: tabular-nums;
        text-overflow: ellipsis;
      }
      & > .rx-button {
        flex: none;
        & > .copied {
          display: none;
        }
      }
    }
    /* コピーできなかった時は、Fieldのエラーと同じく欄の下に危険の色の文字とアイコンで書く。 */
    & > .failure {
      display: grid;
      grid-template-columns: 1em minmax(0, 1fr);
      align-items: start;
      gap: 0.375em;
      margin-block-start: var(--rx-space-1);
      color: var(--rx-danger);
      font-size: var(--rx-label);
      line-height: var(--rx-label-leading);
      & > .rx-icon {
        inline-size: 1em;
        block-size: 1em;
        margin-block-start: calc(3em / 14);
      }
    }
    &[data-copied="true"] > .rx-field > .row > .rx-button {
      color: var(--rx-success);
      & > .copy {
        display: none;
      }
      & > .copied {
        display: block;
      }
    }
  }
}