/**
 * The Wrap インライン装飾 — 色は arc-editing-brand-tokens.css を参照
 */
.tw-inline-format-toolbar-group {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
}

.tw-toolbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
}

.tw-icon-star,
.tw-icon-star-menu {
    font-size: 18px;
}

.tw-icon-pencil,
.tw-icon-pencil-menu {
    font-size: 17px;
}

.tw-icon-palette {
    font-size: 17px;
}

.tw-icon-textcolor-menu {
    font-size: 17px;
    font-weight: 800;
}

.tw-icon-size-m,
.tw-icon-size-l {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
}

.tw-icon-size-m {
    font-size: 15px;
}

.tw-icon-size-l {
    font-size: 18px;
}

.tw-inline-format-toolbar-popover .components-menu-item__item {
    font-weight: 700;
}

/* --- ツールバー色見本 --- */
.tw-icon-red { color: var(--arc-brand-red); }
.tw-icon-orange { color: var(--arc-brand-orange); }
.tw-icon-yellow { color: var(--arc-brand-yellow); }
.tw-icon-green { color: var(--arc-brand-green); }
.tw-icon-blue { color: var(--arc-brand-blue); }
.tw-icon-pink,
.tw-icon-magenta { color: var(--arc-brand-magenta); }
.tw-icon-cyan { color: var(--arc-brand-cyan); }
.tw-icon-violet { color: var(--arc-brand-violet); }
.tw-icon-ink,
.tw-icon-dark { color: var(--arc-brand-ink); }
.tw-icon-black { color: var(--arc-brand-black); }
.tw-icon-cream,
.tw-icon-white { color: var(--arc-brand-cream); }

/* v1.9.0: 赤注意は黄色背景なし */
.tw-red-alert {
    color: var(--arc-brand-red) !important;
    font-weight: 700;
}

/* --- ハイライト共通 --- */
.tw-highlight-red,
.tw-highlight-orange,
.tw-highlight-yellow,
.tw-highlight-green,
.tw-highlight-blue,
.tw-highlight-pink,
.tw-highlight-cyan,
.tw-highlight-violet,
.tw-highlight-magenta,
.tw-highlight-dark,
.tw-highlight-black,
.tw-highlight-cream,
.tw-highlight-ink,
.tw-highlight-white {
    font-weight: 700;
    padding: 0 0.08em;
    border-radius: 0.08em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.tw-highlight-red { background-color: rgb(249 66 58 / 0.28); }
.tw-highlight-orange { background-color: rgb(252 146 0 / 0.27); }
.tw-highlight-yellow { background-color: rgb(255 233 0 / 0.36); }
.tw-highlight-green { background-color: rgb(51 159 0 / 0.24); }
.tw-highlight-blue { background-color: rgb(0 95 176 / 0.24); }
.tw-highlight-pink,
.tw-highlight-magenta { background-color: rgb(255 62 181 / 0.26); }
.tw-highlight-cyan { background-color: rgb(0 154 206 / 0.24); }
.tw-highlight-violet { background-color: rgb(102 106 186 / 0.24); }
.tw-highlight-dark,
.tw-highlight-ink { background-color: rgb(44 46 54 / 0.2); }
.tw-highlight-black { background-color: rgb(0 0 0 / 0.18); }
.tw-highlight-cream { background-color: rgb(251 249 239 / 0.96); }
.tw-highlight-white { background-color: rgb(251 249 239 / 0.96); }

/* --- アンダーライン共通 --- */
.tw-underline-red,
.tw-underline-orange,
.tw-underline-yellow,
.tw-underline-green,
.tw-underline-blue,
.tw-underline-pink,
.tw-underline-cyan,
.tw-underline-violet,
.tw-underline-magenta,
.tw-underline-dark,
.tw-underline-black,
.tw-underline-cream,
.tw-underline-ink,
.tw-underline-white {
    font-weight: 700;
    text-decoration-line: underline;
    text-decoration-thickness: 0.29em;
    text-underline-offset: 0.20em;
    text-decoration-skip-ink: none;
}

.tw-underline-red { text-decoration-color: rgb(249 66 58 / 0.58); }
.tw-underline-orange { text-decoration-color: rgb(252 146 0 / 0.58); }
.tw-underline-yellow { text-decoration-color: rgb(255 233 0 / 0.62); }
.tw-underline-green { text-decoration-color: rgb(51 159 0 / 0.58); }
.tw-underline-blue { text-decoration-color: rgb(0 95 176 / 0.58); }
.tw-underline-pink,
.tw-underline-magenta { text-decoration-color: rgb(255 62 181 / 0.58); }
.tw-underline-cyan { text-decoration-color: rgb(0 154 206 / 0.58); }
.tw-underline-violet { text-decoration-color: rgb(102 106 186 / 0.58); }
.tw-underline-dark,
.tw-underline-ink { text-decoration-color: rgb(44 46 54 / 0.6); }
.tw-underline-black { text-decoration-color: rgb(0 0 0 / 0.64); }
.tw-underline-cream { text-decoration-color: rgb(218 208 170 / 0.75); }
.tw-underline-white { text-decoration-color: rgb(251 249 239 / 0.78); }

/* --- 文字色 --- */
.tw-text-red {
    color: var(--arc-brand-red) !important;
    font-weight: 700;
}

.tw-text-orange {
    color: var(--arc-brand-orange) !important;
    font-weight: 700;
}

.tw-text-yellow {
    color: #b59600 !important;
    font-weight: 700;
}

.tw-text-green {
    color: var(--arc-brand-green) !important;
    font-weight: 700;
}

.tw-text-blue {
    color: var(--arc-brand-blue) !important;
    font-weight: 700;
}

.tw-text-pink,
.tw-text-magenta {
    color: var(--arc-brand-magenta) !important;
    font-weight: 700;
}

.tw-text-cyan {
    color: var(--arc-brand-cyan) !important;
    font-weight: 700;
}

.tw-text-violet {
    color: var(--arc-brand-violet) !important;
    font-weight: 700;
}

.tw-text-ink,
.tw-text-dark {
    color: var(--arc-brand-ink) !important;
    font-weight: 700;
}

.tw-text-black {
    color: var(--arc-brand-black) !important;
    font-weight: 700;
}

.tw-text-cream {
    color: var(--arc-tw-legacy-cream-muted) !important;
    font-weight: 700;
}

.tw-text-white {
    color: var(--arc-brand-cream) !important;
    font-weight: 700;
}

.tw-size-m {
    font-size: 1.125rem;
    line-height: 1.55;
}

.tw-size-l {
    font-size: 1.25rem;
    line-height: 1.5;
}

.tw-toolbar-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    font-size: 15px;
    line-height: 1;
    font-weight: 800;
    border-radius: 4px;
}

.tw-toolbar-menu-icon-active {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    background-color: rgb(0 0 0 / 0.04);
}

.tw-menu-control-active .components-menu-item__item,
.tw-inline-format-toolbar-popover .components-menu-item.is-active .components-menu-item__item {
    font-weight: 800;
}

.tw-icon-reset {
    font-size: 20px;
    font-weight: 800;
}

.tw-toolbar-button-reset[disabled] .tw-toolbar-icon {
    opacity: 0.35;
}
