@wikimedia/codex/dist/sandbox/assets/buttons-Dma4h5sD.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-2fb20f13]{min-width:10px;min-height:10px;width:calc(var(--font-size-medium, 1rem) + 4px);height:calc(var(--font-size-medium, 1rem) + 4px);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-2fb20f13]{background-position:center;background-repeat:no-repeat;background-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-demo-css-icon--trash[data-v-2fb20f13]{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px);mask-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-demo-css-icon--trash[data-v-2fb20f13]{filter:invert(var(--filter-invert-icon, 0));opacity:var(--opacity-icon-base, .87)}[dir] .cdx-demo-css-icon--trash[data-v-2fb20f13]{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-2fb20f13],.cdx-button--weight-primary.cdx-button--action-progressive .cdx-demo-css-icon--trash[data-v-2fb20f13],.cdx-button--weight-primary.cdx-button--action-destructive .cdx-demo-css-icon--trash[data-v-2fb20f13]{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-2fb20f13]{-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-2fb20f13]{transition-property:background-color;transition-duration:.1s}}.cdx-demo-css-icon--trash--small[data-v-2fb20f13]{min-width:10px;min-height:10px;width:var(--font-size-medium, 1rem);height:var(--font-size-medium, 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-2fb20f13]{background-position:center;background-repeat:no-repeat;background-size:max(var(--font-size-medium, 1rem),10px)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-demo-css-icon--trash--small[data-v-2fb20f13]{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:max(var(--font-size-medium, 1rem),10px);mask-size:max(var(--font-size-medium, 1rem),10px)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-demo-css-icon--trash--small[data-v-2fb20f13]{filter:invert(var(--filter-invert-icon, 0));opacity:var(--opacity-icon-base, .87)}[dir] .cdx-demo-css-icon--trash--small[data-v-2fb20f13]{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-2fb20f13],.cdx-button--weight-primary.cdx-button--action-progressive .cdx-demo-css-icon--trash--small[data-v-2fb20f13],.cdx-button--weight-primary.cdx-button--action-destructive .cdx-demo-css-icon--trash--small[data-v-2fb20f13]{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-2fb20f13]{-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-2fb20f13]{transition-property:background-color;transition-duration:.1s}}.cdx-demo-css-icon--align-left[data-v-2fb20f13]{min-width:10px;min-height:10px;width:calc(var(--font-size-medium, 1rem) + 4px);height:calc(var(--font-size-medium, 1rem) + 4px);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-2fb20f13]{background-position:center;background-repeat:no-repeat;background-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-demo-css-icon--align-left[data-v-2fb20f13]{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px);mask-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-demo-css-icon--align-left[data-v-2fb20f13]{filter:invert(var(--filter-invert-icon, 0));opacity:var(--opacity-icon-base, .87)}[dir] .cdx-demo-css-icon--align-left[data-v-2fb20f13]{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-2fb20f13],.cdx-button--weight-primary.cdx-button--action-progressive .cdx-demo-css-icon--align-left[data-v-2fb20f13],.cdx-button--weight-primary.cdx-button--action-destructive .cdx-demo-css-icon--align-left[data-v-2fb20f13]{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-2fb20f13]{-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-2fb20f13]{transition-property:background-color;transition-duration:.1s}}.cdx-demo-css-icon--align-right[data-v-2fb20f13]{min-width:10px;min-height:10px;width:calc(var(--font-size-medium, 1rem) + 4px);height:calc(var(--font-size-medium, 1rem) + 4px);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-2fb20f13]{background-position:center;background-repeat:no-repeat;background-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px)}}@supports ((-webkit-mask-image: none) or (mask-image: none)){.cdx-demo-css-icon--align-right[data-v-2fb20f13]{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px);mask-size:max(calc(var(--font-size-medium, 1rem) + 4px),10px)}}@supports not (((-webkit-mask-image: none) or (mask-image: none))){.cdx-demo-css-icon--align-right[data-v-2fb20f13]{filter:invert(var(--filter-invert-icon, 0));opacity:var(--opacity-icon-base, .87)}[dir] .cdx-demo-css-icon--align-right[data-v-2fb20f13]{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-2fb20f13],.cdx-button--weight-primary.cdx-button--action-progressive .cdx-demo-css-icon--align-right[data-v-2fb20f13],.cdx-button--weight-primary.cdx-button--action-destructive .cdx-demo-css-icon--align-right[data-v-2fb20f13]{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-2fb20f13]{-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-2fb20f13]{transition-property:background-color;transition-duration:.1s}}[dir=ltr] .cdx-demo-flush-layout--regular .cdx-button[data-v-2fb20f13]:first-child{margin-left:-12px}[dir=rtl] .cdx-demo-flush-layout--regular .cdx-button[data-v-2fb20f13]:first-child{margin-right:-12px}[dir=ltr] .cdx-demo-flush-layout--regular .cdx-button[data-v-2fb20f13]:last-child{margin-right:-12px}[dir=rtl] .cdx-demo-flush-layout--regular .cdx-button[data-v-2fb20f13]:last-child{margin-left:-12px}[dir=ltr] .cdx-demo-flush-layout--icon-only .cdx-button[data-v-2fb20f13]:first-child{margin-left:-6px}[dir=rtl] .cdx-demo-flush-layout--icon-only .cdx-button[data-v-2fb20f13]:first-child{margin-right:-6px}[dir=ltr] .cdx-demo-flush-layout--icon-only .cdx-button[data-v-2fb20f13]:last-child{margin-right:-6px}[dir=rtl] .cdx-demo-flush-layout--icon-only .cdx-button[data-v-2fb20f13]:last-child{margin-left:-6px}[dir=ltr] .cdx-demo-flush-layout--icon-only-small .cdx-button[data-v-2fb20f13]:first-child{margin-left:-3px}[dir=rtl] .cdx-demo-flush-layout--icon-only-small .cdx-button[data-v-2fb20f13]:first-child{margin-right:-3px}[dir=ltr] .cdx-demo-flush-layout--icon-only-small .cdx-button[data-v-2fb20f13]:last-child{margin-right:-3px}[dir=rtl] .cdx-demo-flush-layout--icon-only-small .cdx-button[data-v-2fb20f13]:last-child{margin-left:-3px}[dir=ltr] .cdx-demo-flush-layout--icon-only-large .cdx-button[data-v-2fb20f13]:first-child{margin-left:-12px}[dir=rtl] .cdx-demo-flush-layout--icon-only-large .cdx-button[data-v-2fb20f13]:first-child{margin-right:-12px}[dir=ltr] .cdx-demo-flush-layout--icon-only-large .cdx-button[data-v-2fb20f13]:last-child{margin-right:-12px}[dir=rtl] .cdx-demo-flush-layout--icon-only-large .cdx-button[data-v-2fb20f13]:last-child{margin-left:-12px}.cdx-demo-flush-layout__buttons[data-v-2fb20f13]{display:flex;justify-content:space-between}[dir] .cdx-demo-flush-layout__content[data-v-2fb20f13]{margin-top:16px;border:1px solid var(--border-color-base, #a2a9b1);padding:16px}.cdx-demo-buttons-flex[data-v-2fb20f13]{font-size:14px}[dir] .cdx-demo-buttons-flex[data-v-2fb20f13]{margin-bottom:16px}.cdx-demo-buttons-flex--desktop[data-v-2fb20f13]{max-width:50em}.cdx-demo-buttons-flex--desktop__flex-container[data-v-2fb20f13]{display:flex;justify-content:center;column-gap:4px}.cdx-demo-buttons-flex--desktop .cdx-text-input[data-v-2fb20f13]{min-width:auto}.cdx-demo-buttons-flex--mobile[data-v-2fb20f13]{max-width:341px}.cdx-demo-buttons-flex--mobile__flex-container[data-v-2fb20f13]{display:flex;justify-content:center;column-gap:4px}.cdx-demo-buttons-flex--mobile .cdx-text-input[data-v-2fb20f13]{min-width:auto}.cdx-demo-buttons-flex--icon-only[data-v-2fb20f13]{display:flex;gap:4px}