/* Split button: one interactive group, two surfaces and a transparent gap. */
.button{
 display:inline-flex;align-items:stretch;justify-content:space-between;
 gap:var(--button-gap,3px);min-height:var(--button-size,64px);max-width:100%;
 padding:0;border:0;background:transparent;color:var(--button-color,var(--ink,#231f20));
 font-family:inherit;font-weight:600;font-size:var(--button-font-size,18px);line-height:1.4;
 text-decoration:none;vertical-align:middle;cursor:pointer;
}
.button-label,.button-icon{transition:background-color .2s ease,color .2s ease}
.button-label{
 display:flex;align-items:center;align-self:stretch;flex:1;min-width:0;
 text-wrap:balance;
 padding:var(--button-padding-block,12px) var(--button-padding-inline,24px);
 background:var(--button-label-background,var(--button-background,var(--yellow,#fac313)));
}
.button-icon{
 display:grid;place-items:center;flex:0 0 var(--button-size,64px);
 width:var(--button-size,64px);min-height:var(--button-size,64px);align-self:stretch;overflow:hidden;border:0;
 background:var(--button-icon-background,var(--button-background,var(--yellow,#fac313)));
 color:var(--button-icon-color,inherit);
}
.button-icon svg{width:var(--button-icon-size,25px);height:var(--button-icon-size,25px);transition:transform .25s ease}
.button:is(:hover,:focus-visible),.button-host:is(:hover,:focus-visible) .button{color:var(--button-hover-color,var(--ink,#231f20));text-decoration:none}
.button:is(:hover,:focus-visible) .button-label,.button-host:is(:hover,:focus-visible) .button-label{background:var(--button-label-hover-background,var(--button-hover-background,#fff))}
.button:is(:hover,:focus-visible) .button-icon,.button-host:is(:hover,:focus-visible) .button-icon{
 background:var(--button-icon-hover-background,var(--button-hover-background,#fff));
 color:var(--button-icon-hover-color,inherit);
}
.button:is(:hover,:focus-visible) .button-icon svg,.button-host:is(:hover,:focus-visible) .button-icon svg{transform:translate(3px,-3px)}
.button:focus-visible{outline:3px solid var(--button-focus-color,var(--teal,#189ab4));outline-offset:6px}
.button-dark{--button-background:var(--ink,#231f20);--button-color:#fff}
.button-on-light{--button-hover-background:var(--ink,#231f20);--button-hover-color:#fff}
@media(max-width:760px){.button{--button-size:60px;--button-font-size:16px;--button-padding-block:14px;--button-padding-inline:18px;--button-icon-size:23px}}
@media(max-width:360px){.button{--button-size:56px;--button-font-size:15px;--button-padding-inline:14px}}
@media(prefers-reduced-motion:reduce){.button-label,.button-icon,.button-icon svg{transition:none}.button:is(:hover,:focus-visible) .button-icon svg,.button-host:is(:hover,:focus-visible) .button-icon svg{transform:none}}
