:root {
  --ui-icon-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15.5 4.5 4 4M4 20l4.2-.8L20 7.4a2.8 2.8 0 0 0-4-4L4.8 15.8 4 20Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-icon-add: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --ui-icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 6 2 2 4-4M12 6h9M3 16l2 2 4-4M12 16h9' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-icon-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 16 14 6a2 2 0 0 1 3 0l4 4a2 2 0 0 1 0 3l-7 7H8l-4-4ZM10 10l7 7M13 20h8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M6 18 18 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --ui-icon-remove: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7M14 10v7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-icon-held: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4 4L19 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-icon-skip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M8 3v4m8-4v4M3 11h18m-12 3 6 4m0-4-6 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-icon-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20V4m-6 6 6-6 6 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-icon-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16m-6-6 6 6 6-6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* キーボード操作の位置を、要素種別と操作の重要度にかかわらず明示する。 */
:is(.ui-action, .button, .link-button, .disclosure-toggle):focus-visible {
  outline: 3px solid var(--ui-focus-color, var(--accent, #b36b37));
  outline-offset: 3px;
}
:is(.ui-action, .link-button):not(.button)[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ui-action--warning:not(.button) { color: var(--ui-warning-color, #825210); }
.ui-action--danger:not(.button) { color: var(--ui-danger-color, #912b3c); }

/* JSが準備を終えるまでは、ネイティブの非表示状態を保つ。 */
:is(.button, .ui-action, .disclosure-toggle)[hidden] { display: none; }

/* 空の生成内容に線画だけを描く。操作名は本文に残し、装飾は読み上げに加えない。 */
.ui-action[data-ui-icon="edit"] { --ui-action-icon: var(--ui-icon-edit); }
.ui-action[data-ui-icon="add"] { --ui-action-icon: var(--ui-icon-add); }
.ui-action[data-ui-icon="select"] { --ui-action-icon: var(--ui-icon-select); }
.ui-action[data-ui-icon="clear"] { --ui-action-icon: var(--ui-icon-clear); }
.ui-action[data-ui-icon="close"] { --ui-action-icon: var(--ui-icon-close); }
.ui-action[data-ui-icon="remove"] { --ui-action-icon: var(--ui-icon-remove); }
.ui-action[data-ui-icon="held"] { --ui-action-icon: var(--ui-icon-held); }
.ui-action[data-ui-icon="skip"] { --ui-action-icon: var(--ui-icon-skip); }
.ui-action[data-ui-icon="up"] { --ui-action-icon: var(--ui-icon-up); }
.ui-action[data-ui-icon="down"] { --ui-action-icon: var(--ui-icon-down); }
.ui-action[data-ui-icon]::before {
  content: "";
  display: inline-block;
  flex: none;
  order: 1;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  mask: var(--ui-action-icon) center / contain no-repeat;
  pointer-events: none;
}
/* 意味アイコンも文字の後へ。文字だけの操作では隣接する間隔を保つ。 */
.button.ui-action[data-ui-icon]::before {
  margin-inline-start: var(--ui-action-icon-margin);
}
/* 開閉などの状態マークを併記する場合は、意味アイコンの直後へ置く。 */
.button.ui-action[data-ui-icon]::after {
  order: 2;
  margin-inline-start: 0;
}
.ui-action__label { min-width: 0; }
button.ui-action[data-ui-action="action"][data-ui-placement="text"]:not(.button):not([hidden]) {
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--ui-action-text-color, var(--green, #245445));
  font: inherit;
  text-align: start;
}
/* 並べ替えなどの意味を持つアイコン操作も、共通の押下範囲と配置を使う。 */
.button.ui-action-icon-only {
  --ui-action-icon-margin: 0;
  --ui-action-width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
}
.ui-action[data-ui-icon]:not(.button):not(.taxonomy-open):not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2, 8px);
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  vertical-align: middle;
}

/* 入力の入口は短い操作名と指定アイコンを並べる。汎用の追加メニューマークは付けない。 */
button.ui-action[data-ui-action="dialog"][data-ui-placement="text"]:not(.button):not(.taxonomy-open):not([hidden]),
summary.ui-action[data-ui-action="dialog"]:not(.button):not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ui-space-2, 8px);
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  list-style: none;
}
button.ui-action[data-ui-action="dialog"][data-ui-placement="text"]:not(.button):not(.taxonomy-open) {
  width: auto;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
}
summary.ui-action[data-ui-action="dialog"]::-webkit-details-marker { display: none; }
summary.ui-action[data-ui-action="dialog"]:not(.button) { width: 100%; }

@media (forced-colors: active) {
  .ui-action[data-ui-icon]::before,
  .ui-external-link::after,
  .button.button--forward::after,
  .disclosure-toggle::after { forced-color-adjust: none; }
}