/* Button styling
 * All button styling now lives here.
*/

/* Default buttons */
a.button {  padding: 1rem 2rem; display: inline-block; border-radius: 10rem; transition: all .15s ease-in-out; }
a.button:hover, a.button.current { border-radius: var(--border-radius);transition: background .15s ease-in-out; }
a.display-block { width: 100%; }
p > a.button + a.button { margin-left: 2rem; }

:is(h1, h2, h3, h4, h5, h6, ul, ol, blockquote, table) +:is(a.button, .button-block) { margin-top: clamp(1.5rem, 4vw, 4rem);  }

/* Buttons blocks */
.button-block.bottom { position: absolute; bottom: 6rem; }
p + .button-block, img + .button-block { margin-top: 2rem; }

.button.toast-primary { background: var(--brand-3); color: #fff; padding-left: 5rem; position: relative; }
.button.toast-primary:hover { background: var(--brand-1); border-radius: 10rem; }

.button.toast-primary:before { content:""; color: #fff; width: 3rem; display: block; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); bottom: 0;
    height: 3rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='%23ffffff' d='M320 112C434.9 112 528 205.1 528 320C528 434.9 434.9 528 320 528C205.1 528 112 434.9 112 320C112 205.1 205.1 112 320 112zM320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM303 417C312.4 426.4 327.6 426.4 336.9 417L408.9 345C418.3 335.6 418.3 320.4 408.9 311.1C399.5 301.8 384.3 301.7 375 311.1L344 342.1L344 240C344 226.7 333.3 216 320 216C306.7 216 296 226.7 296 240L296 342.1L265 311.1C255.6 301.7 240.4 301.7 231.1 311.1C221.8 320.5 221.7 335.7 231.1 345L303.1 417z'/></svg>");

} 


.learn-more .button.toast-secondary { background: rgba(0,0,0,.8); color: #fff; padding-left: 5rem; position: relative; }

.button.toast-secondary { background: var(--brand-1); color: #fff; padding-left: 5rem; position: relative; }
.button.toast-secondary:hover { background: var(--brand-2); border-radius: 10rem; }

.button.toast-secondary:before { content:""; color: #fff; width: 3rem; display: block; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); bottom: 0;
    height: 3rem;
    background-size: contain;
    background-repeat: no-repeat;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='%23ffffff' d='M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 112C205.1 112 112 205.1 112 320C112 434.9 205.1 528 320 528C434.9 528 528 434.9 528 320C528 205.1 434.9 112 320 112zM390.7 233.9C398.5 223.2 413.5 220.8 424.2 228.6C434.9 236.4 437.3 251.4 429.5 262.1L307.4 430.1C303.3 435.8 296.9 439.4 289.9 439.9C282.9 440.4 276 437.9 271.1 433L215.2 377.1C205.8 367.7 205.8 352.5 215.2 343.2C224.6 333.9 239.8 333.8 249.1 343.2L285.1 379.2L390.7 234z'/></svg>");



} 






.button.toast-tertiary, a.toast-tertiary { color: var(--brand-1); background: #fff; outline: .1rem solid var(--brand-1); padding: 1rem 2rem; }
.button.toast-tertiary:hover, a.toast-tertiary:hover { color: var(--brand-2); background: #fff; outline: .1rem solid var(--brand-2); }

/* Buttons with Backgrounds 
:is(.bg1, .bg3, .bg4, .bg5, .bg6, .bg7, .bg8) a.button, .has-bg a.button { background: var(--brand-2); }
:is(.bg2) a.button { background: var(--brand-1); }
:is(.bg1, .bg2, .bg3, .bg4, .bg5, .bg6, .bg7, .bg8) a.button:hover, .has-bg a.button:hover { background: rgba(0,0,0,.5); } */