.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);color:currentColor;color:var(--text-color);text-decoration:none;-webkit-text-decoration:none;-webkit-text-decoration:var(--text-decoration);text-decoration:var(--text-decoration);border:0;transition:color .15s ease-out,background-color .15s ease-out}.button:hover{color:var(--hover-color)}.button[disabled]{pointer-events:none;opacity:.5}.button[props-version=primary]{--text-color:var(--color-white);background-color:var(--color-red)}.button[props-version=primary]:hover{background-color:var(--color-black)}.button[props-version=secondary]{--text-color:var(--color-white);--icon-color:var(--color-red);background-color:var(--color-black)}.button[props-version=secondary]:hover{--text-color:var(--color-red)}.button[props-version=secondary][props-icon-only]:hover{--icon-color:var(--color-white)}.button[props-version=secondary][props-cta]:not([props-icon-name]){--text-color:var(--color-red) }.button[props-version=secondary][props-font=dimmed]:not(:hover){--text-color:var(--color-white-dimmed)}.button[props-version=ghost]{--text-color:var(--color-red);background-color:transparent}.button[props-version=ghost]:hover{text-decoration:underline}.button[props-version=ghost][props-icon-only]:hover{--icon-color:var(--color-black)}.button[props-version=ghost][props-icon-name]{--text-color:var(--color-black);--icon-color:var(--color-red)}.button[props-version=ghost][props-icon-name]:hover{--text-color:var(--color-red) }.button[props-variant=small]{--padding-inline:1.5em;--padding-block:.75em}.button[props-variant=inline]{--padding-inline:0;--padding-block:0;display:inline-flex;font-size:inherit;line-height:inherit;letter-spacing:inherit}.button[props-icon-only]{--padding-inline:var(--padding-block)}.button[props-icon-only][props-variant=inline] .icon{width:100%;height:100%}.button[props-icon-only] .icon{margin:0}.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}a.button{display:inline-flex}.button:not(.button--icon-only) .button__image--left{margin-right:var(--image-padding)}.button:not(.button--icon-only) .button__icon--left{margin-right:var(--icon-padding)}.button:not(.button--icon-only) .button__image--right{margin-left:var(--image-padding)}.button:not(.button--icon-only) .button__icon--right{margin-left:var(--icon-padding)}