.button-component{container-name:--container-button;container-type:inline-size}.button-component .button{margin-bottom:unset}.button{--color-border:var(--c-nightblue);--color-background:var(--c-nightblue);--color-text:#fff;align-items:center;background-color:var(--color-background);border:none;box-sizing:border-box;color:var(--color-text);cursor:pointer;display:flex;font-family:Termina-Regular;font-size:var(--type-size-preheadline);justify-content:center;letter-spacing:.1em;margin-bottom:calc(var(--spacer)*.75);margin-left:auto;margin-right:auto;max-width:500px;min-height:calc(var(--type-size-copytext)*3);outline:0;padding:calc(var(--type-size-copytext)*.5);position:relative;text-decoration:none;text-transform:uppercase;width:100%}.button[data-style=fill]{--color-border:unset;border:unset}.button[data-style=fill][data-color=gold]{--color-background:var(--c-gold)}.button[data-style=fill][data-color=gold][data-invert-color=true]{--color-background:#fff;--color-text:var(--c-gold)}.button[data-style=fill][data-color=blue]{--color-background:var(--c-nightblue)}.button[data-style=fill][data-color=blue][data-invert-color=true]{--color-background:#fff;--color-text:var(--c-nightblue)}.button[data-style=outline]{--color-background:#fff;border:1px solid var(--color-border)}.button[data-style=outline][data-color=gold]{--color-border:var(--c-gold);--color-text:var(--c-gold)}.button[data-style=outline][data-color=gold][data-invert-color=true]{--color-border:#fff;--color-text:#fff;--color-background:var(--c-gold)}.button[data-style=outline][data-color=blue]{--color-border:var(--c-nightblue);--color-text:var(--c-nightblue)}.button[data-style=outline][data-color=blue][data-invert-color=true]{--color-border:#fff;--color-text:#fff;--color-background:var(--c-nightblue)}.button .button-icon{bottom:0;fill:var(--color-background);height:calc(var(--type-size-copytext)*1.75);left:calc(var(--type-size-copytext)*1);margin-bottom:auto;margin-top:auto;position:absolute;stroke:var(--color-text);stroke-width:4px;top:0;width:calc(var(--type-size-copytext)*1.75)}.button .button-inner{text-align:center;width:100%}@container --container-button (width < 20rem){.button .button-inner{align-items:center;display:flex;flex-wrap:wrap}.button .button-inner .button-icon{inset:unset;position:relative}.button .button-inner .text{-webkit-hyphens:auto;hyphens:auto;margin-inline:auto}}