@wikimedia/codex/dist/sandbox/assets/buttons-C4j-MazL.css

Codex Design System for Wikimedia

[dir] .cdx-docs-button-demo-table td{text-align:center}.cdx-docs-button-demo-table th{font-weight:400}.cdx-demo-css-icon--trash[data-v-05f06af0]{min-width:20px;min-height:20px;width:1.25rem;height:1.25rem;display:inline-block;vertical-align:text-bottom}@supports not (((-webkit-mask-image: none) or (mask-image: none))){[dir] .cdx-demo-css-icon--trash[data-v-05f06af0]{background-position:center;background-repeat:no-repeat;background-size:max(1.25rem,20px)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-demo-css-icon--trash[data-v-05f06af0]{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:max(1.25rem,20px);mask-size:max(1.25rem,20px)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-demo-css-icon--trash[data-v-05f06af0]{filter:invert(var(--filter-invert-icon, 0));opacity:var(--opacity-icon-base, .87)}[dir] .cdx-demo-css-icon--trash[data-v-05f06af0]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M17 2h-3.5l-1-1h-5l-1 1H3v2h14zM4 17a2 2 0 002 2h8a2 2 0 002-2V5H4z"/></svg>')}.cdx-button:not(.cdx-button--weight-quiet):disabled .cdx-demo-css-icon--trash[data-v-05f06af0],.cdx-button--weight-primary.cdx-button--action-progressive .cdx-demo-css-icon--trash[data-v-05f06af0],.cdx-button--weight-primary.cdx-button--action-destructive .cdx-demo-css-icon--trash[data-v-05f06af0]{filter:invert(var(--filter-invert-primary-button-icon, 1))}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-demo-css-icon--trash[data-v-05f06af0]{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M17 2h-3.5l-1-1h-5l-1 1H3v2h14zM4 17a2 2 0 002 2h8a2 2 0 002-2V5H4z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M17 2h-3.5l-1-1h-5l-1 1H3v2h14zM4 17a2 2 0 002 2h8a2 2 0 002-2V5H4z"/></svg>')}[dir] .cdx-demo-css-icon--trash[data-v-05f06af0]{transition-property:background-color;transition-duration:.1s}}.cdx-demo-css-icon--trash--small[data-v-05f06af0]{min-width:16px;min-height:16px;width:1rem;height:1rem;display:inline-block;vertical-align:text-bottom}@supports not (((-webkit-mask-image: none) or (mask-image: none))){[dir] .cdx-demo-css-icon--trash--small[data-v-05f06af0]{background-position:center;background-repeat:no-repeat;background-size:max(1rem,16px)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-demo-css-icon--trash--small[data-v-05f06af0]{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:max(1rem,16px);mask-size:max(1rem,16px)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-demo-css-icon--trash--small[data-v-05f06af0]{filter:invert(var(--filter-invert-icon, 0));opacity:var(--opacity-icon-base, .87)}[dir] .cdx-demo-css-icon--trash--small[data-v-05f06af0]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M17 2h-3.5l-1-1h-5l-1 1H3v2h14zM4 17a2 2 0 002 2h8a2 2 0 002-2V5H4z"/></svg>')}.cdx-button:not(.cdx-button--weight-quiet):disabled .cdx-demo-css-icon--trash--small[data-v-05f06af0],.cdx-button--weight-primary.cdx-button--action-progressive .cdx-demo-css-icon--trash--small[data-v-05f06af0],.cdx-button--weight-primary.cdx-button--action-destructive .cdx-demo-css-icon--trash--small[data-v-05f06af0]{filter:invert(var(--filter-invert-primary-button-icon, 1))}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-demo-css-icon--trash--small[data-v-05f06af0]{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M17 2h-3.5l-1-1h-5l-1 1H3v2h14zM4 17a2 2 0 002 2h8a2 2 0 002-2V5H4z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M17 2h-3.5l-1-1h-5l-1 1H3v2h14zM4 17a2 2 0 002 2h8a2 2 0 002-2V5H4z"/></svg>')}[dir] .cdx-demo-css-icon--trash--small[data-v-05f06af0]{transition-property:background-color;transition-duration:.1s}}.cdx-demo-css-icon--align-left[data-v-05f06af0]{min-width:20px;min-height:20px;width:1.25rem;height:1.25rem;display:inline-block;vertical-align:text-bottom}@supports not (((-webkit-mask-image: none) or (mask-image: none))){[dir] .cdx-demo-css-icon--align-left[data-v-05f06af0]{background-position:center;background-repeat:no-repeat;background-size:max(1.25rem,20px)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-demo-css-icon--align-left[data-v-05f06af0]{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:max(1.25rem,20px);mask-size:max(1.25rem,20px)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-demo-css-icon--align-left[data-v-05f06af0]{filter:invert(var(--filter-invert-icon, 0));opacity:var(--opacity-icon-base, .87)}[dir] .cdx-demo-css-icon--align-left[data-v-05f06af0]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M12 7h7v2h-7zm0 4h7v2h-7zM1 15h18v2H1zM1 3h18v2H1z"/><rect width="8" height="6" x="1" y="7" rx="1"/></svg>')}.cdx-button:not(.cdx-button--weight-quiet):disabled .cdx-demo-css-icon--align-left[data-v-05f06af0],.cdx-button--weight-primary.cdx-button--action-progressive .cdx-demo-css-icon--align-left[data-v-05f06af0],.cdx-button--weight-primary.cdx-button--action-destructive .cdx-demo-css-icon--align-left[data-v-05f06af0]{filter:invert(var(--filter-invert-primary-button-icon, 1))}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-demo-css-icon--align-left[data-v-05f06af0]{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M12 7h7v2h-7zm0 4h7v2h-7zM1 15h18v2H1zM1 3h18v2H1z"/><rect width="8" height="6" x="1" y="7" rx="1"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M12 7h7v2h-7zm0 4h7v2h-7zM1 15h18v2H1zM1 3h18v2H1z"/><rect width="8" height="6" x="1" y="7" rx="1"/></svg>')}[dir] .cdx-demo-css-icon--align-left[data-v-05f06af0]{transition-property:background-color;transition-duration:.1s}}.cdx-demo-css-icon--align-right[data-v-05f06af0]{min-width:20px;min-height:20px;width:1.25rem;height:1.25rem;display:inline-block;vertical-align:text-bottom}@supports not (((-webkit-mask-image: none) or (mask-image: none))){[dir] .cdx-demo-css-icon--align-right[data-v-05f06af0]{background-position:center;background-repeat:no-repeat;background-size:max(1.25rem,20px)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-demo-css-icon--align-right[data-v-05f06af0]{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:max(1.25rem,20px);mask-size:max(1.25rem,20px)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-demo-css-icon--align-right[data-v-05f06af0]{filter:invert(var(--filter-invert-icon, 0));opacity:var(--opacity-icon-base, .87)}[dir] .cdx-demo-css-icon--align-right[data-v-05f06af0]{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M1 7h7v2H1zm0 4h7v2H1zm0 4h18v2H1zM1 3h18v2H1z"/><rect width="8" height="6" x="11" y="7" rx="1"/></svg>')}.cdx-button:not(.cdx-button--weight-quiet):disabled .cdx-demo-css-icon--align-right[data-v-05f06af0],.cdx-button--weight-primary.cdx-button--action-progressive .cdx-demo-css-icon--align-right[data-v-05f06af0],.cdx-button--weight-primary.cdx-button--action-destructive .cdx-demo-css-icon--align-right[data-v-05f06af0]{filter:invert(var(--filter-invert-primary-button-icon, 1))}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-demo-css-icon--align-right[data-v-05f06af0]{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M1 7h7v2H1zm0 4h7v2H1zm0 4h18v2H1zM1 3h18v2H1z"/><rect width="8" height="6" x="11" y="7" rx="1"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M1 7h7v2H1zm0 4h7v2H1zm0 4h18v2H1zM1 3h18v2H1z"/><rect width="8" height="6" x="11" y="7" rx="1"/></svg>')}[dir] .cdx-demo-css-icon--align-right[data-v-05f06af0]{transition-property:background-color;transition-duration:.1s}}[dir=ltr] .cdx-demo-flush-layout--regular .cdx-button[data-v-05f06af0]:first-child{margin-left:-12px}[dir=rtl] .cdx-demo-flush-layout--regular .cdx-button[data-v-05f06af0]:first-child{margin-right:-12px}[dir=ltr] .cdx-demo-flush-layout--regular .cdx-button[data-v-05f06af0]:last-child{margin-right:-12px}[dir=rtl] .cdx-demo-flush-layout--regular .cdx-button[data-v-05f06af0]:last-child{margin-left:-12px}[dir=ltr] .cdx-demo-flush-layout--icon-only .cdx-button[data-v-05f06af0]:first-child{margin-left:-6px}[dir=rtl] .cdx-demo-flush-layout--icon-only .cdx-button[data-v-05f06af0]:first-child{margin-right:-6px}[dir=ltr] .cdx-demo-flush-layout--icon-only .cdx-button[data-v-05f06af0]:last-child{margin-right:-6px}[dir=rtl] .cdx-demo-flush-layout--icon-only .cdx-button[data-v-05f06af0]:last-child{margin-left:-6px}[dir=ltr] .cdx-demo-flush-layout--icon-only-large .cdx-button[data-v-05f06af0]:first-child{margin-left:-12px}[dir=rtl] .cdx-demo-flush-layout--icon-only-large .cdx-button[data-v-05f06af0]:first-child{margin-right:-12px}[dir=ltr] .cdx-demo-flush-layout--icon-only-large .cdx-button[data-v-05f06af0]:last-child{margin-right:-12px}[dir=rtl] .cdx-demo-flush-layout--icon-only-large .cdx-button[data-v-05f06af0]:last-child{margin-left:-12px}.cdx-demo-flush-layout__buttons[data-v-05f06af0]{display:flex;justify-content:space-between}[dir] .cdx-demo-flush-layout__content[data-v-05f06af0]{margin-top:16px;border:1px solid var(--border-color-base, #a2a9b1);padding:16px}.cdx-demo-buttons-flex[data-v-05f06af0]{font-size:14px}[dir] .cdx-demo-buttons-flex[data-v-05f06af0]{margin-bottom:16px}.cdx-demo-buttons-flex--desktop[data-v-05f06af0]{max-width:50em}.cdx-demo-buttons-flex--desktop__flex-container[data-v-05f06af0]{display:flex;justify-content:center;column-gap:4px}.cdx-demo-buttons-flex--desktop .cdx-text-input[data-v-05f06af0]{min-width:auto}.cdx-demo-buttons-flex--mobile[data-v-05f06af0]{max-width:341px}.cdx-demo-buttons-flex--mobile__flex-container[data-v-05f06af0]{display:flex;justify-content:center;column-gap:4px}.cdx-demo-buttons-flex--mobile .cdx-text-input[data-v-05f06af0]{min-width:auto}.cdx-demo-buttons-flex--icon-only[data-v-05f06af0]{display:flex;gap:4px}