html:has(meta[name=design][content=legacy]) .button{--icon-color: currentColor;--text-color: currentColor;--text-decoration: none;--icon-padding: .3em;--image-padding: .6em;--padding-inline: 2em;--padding-block: 1em;--hover-color: var(--text-color);cursor:pointer;display:flex;flex-direction:row;align-items:center;justify-content:center;padding-top:1em;padding-top:var(--padding-block);padding-right:2em;padding-right:var(--padding-inline);padding-bottom:1em;padding-bottom:var(--padding-block);padding-left:2em;padding-left:var(--padding-inline);border:0;color:currentColor;color:var(--text-color);text-decoration:none;-webkit-text-decoration:none;-webkit-text-decoration:var(--text-decoration);text-decoration:var(--text-decoration);transition:color .15s ease-out,background-color .15s ease-out}:is(html:has(meta[name=design][content=legacy]) .button):hover{color:var(--hover-color)}[disabled]:is(html:has(meta[name=design][content=legacy]) .button){pointer-events:none;opacity:.5}[props-version=primary]:is(html:has(meta[name=design][content=legacy]) .button){--text-color: var(--color-white);background-color:var(--color-red)}[props-version=primary]:is(html:has(meta[name=design][content=legacy]) .button):hover{background-color:var(--color-black)}[props-version=secondary]:is(html:has(meta[name=design][content=legacy]) .button){--text-color: var(--color-white);--icon-color: var(--color-red);background-color:var(--color-black)}[props-version=secondary]:is(html:has(meta[name=design][content=legacy]) .button):hover{--text-color: var(--color-red)}[props-version=secondary][props-icon-only]:is(html:has(meta[name=design][content=legacy]) .button):hover{--icon-color: var(--color-white)}[props-version=secondary][props-cta]:is(html:has(meta[name=design][content=legacy]) .button):not([props-icon-name]){--text-color: var(--color-red)}[props-version=secondary][props-font=dimmed]:is(html:has(meta[name=design][content=legacy]) .button):not(:hover){--text-color: var(--color-white-dimmed)}[props-version=ghost]:is(html:has(meta[name=design][content=legacy]) .button){--text-color: var(--color-red);background-color:transparent}[props-version=ghost]:is(html:has(meta[name=design][content=legacy]) .button):hover{text-decoration:underline}[props-version=ghost][props-icon-only]:is(html:has(meta[name=design][content=legacy]) .button):hover{--icon-color: var(--color-black)}[props-version=ghost][props-icon-name]:is(html:has(meta[name=design][content=legacy]) .button){--text-color: var(--color-black);--icon-color: var(--color-red)}[props-version=ghost][props-icon-name]:is(html:has(meta[name=design][content=legacy]) .button):hover{--text-color: var(--color-red)}[props-variant=small]:is(html:has(meta[name=design][content=legacy]) .button){--padding-inline: 1.5em;--padding-block: .75em}[props-variant=inline]:is(html:has(meta[name=design][content=legacy]) .button){--padding-inline: 0;--padding-block: 0;display:inline-flex;font-size:inherit;line-height:inherit;letter-spacing:inherit}[props-icon-only]:is(html:has(meta[name=design][content=legacy]) .button){--padding-inline: var(--padding-block)}[props-icon-only][props-variant=inline]:is(html:has(meta[name=design][content=legacy]) .button) .icon{width:100%;height:100%}[props-icon-only]:is(html:has(meta[name=design][content=legacy]) .button) .icon{margin:0}:is(html:has(meta[name=design][content=legacy]) .button) .icon{width:calc(var(--font-size) * var(--line-height));height:calc(var(--font-size) * var(--line-height));fill:var(--icon-color);transition:fill .15s ease-out}html:has(meta[name=design][content=legacy]) a.button{display:inline-flex}html:has(meta[name=design][content=legacy]) .button:not(.button--icon-only) .button__image--left{margin-right:var(--image-padding)}html:has(meta[name=design][content=legacy]) .button:not(.button--icon-only) .button__icon--left{margin-right:var(--icon-padding)}html:has(meta[name=design][content=legacy]) .button:not(.button--icon-only) .button__image--right{margin-left:var(--image-padding)}html:has(meta[name=design][content=legacy]) .button:not(.button--icon-only) .button__icon--right{margin-left:var(--icon-padding)}