:root{--button-027-color:var(--color-charcoal);--button-027-color-background:var(--color-miova-white);--button-027-border:0;--button-027-hover-color:var(--color-miova-white);--button-027-hover-color-background:var(--color-miova-purple);--button-027-hover-border:0;--button-027-color-focus:var(--color-charcoal);--button-027-padding:.75em 1em;--button-027-border-radius:.25em;--button-027-focus-inset:-.125em;--button-027-click-scale:.955 .925;--button-027-focus-scale:1.15;--button-027-ease-click:cubic-bezier(.4, 0, .2, 1);--button-027-ease-hover:linear(0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1);--button-027-ease-focus:cubic-bezier(.32, .72, 0, 1)}.button-027--primary{--button-027-color-background:var(--color-miova-purple);--button-027-color:var(--color-miova-white);--button-027-hover-color-background:var(--color-miova-black);--button-027-hover-color:var(--color-miova-white);--button-027-color-focus:var(--color-miova-purple)}.button-027--dark{--button-027-color-background:var(--color-miova-black);--button-027-color:var(--color-miova-white);--button-027-hover-color-background:var(--color-miova-purple);--button-027-hover-color:var(--color-miova-white);--button-027-color-focus:var(--color-miova-black)}.button-027--light{--button-027-color-background:var(--color-miova-white);--button-027-color:var(--color-miova-black);--button-027-hover-color-background:var(--color-miova-purple);--button-027-hover-color:var(--color-miova-white);--button-027-color-focus:var(--color-miova-black)}.button-027--hover-primary{--button-027-hover-color-background:var(--color-miova-purple);--button-027-hover-color:var(--color-miova-white)}.button-027--hover-dark{--button-027-hover-color-background:var(--color-miova-black);--button-027-hover-color:var(--color-miova-white)}.button-027--hover-light{--button-027-hover-color-background:var(--color-miova-white);--button-027-hover-color:var(--color-miova-black)}button-027{vertical-align:middle;display:inline-flex}.button-027{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:scale .15s var(--button-027-ease-click);background-color:#0000;outline-style:none;padding:0;line-height:1;text-decoration:none;display:inline-grid;position:relative}.button-027:after{content:"";inset:var(--button-027-focus-inset);border-radius:var(--button-027-border-radius);transition:box-shadow .2s var(--button-027-ease-focus), scale .75s var(--button-027-ease-hover);scale:var(--button-027-focus-scale);pointer-events:none;z-index:1;display:block;position:absolute}.button-027:focus-visible:after{box-shadow:0 0 0 .125em var(--button-027-color-focus);scale:1}.button-027:active{scale:var(--button-027-click-scale)}.button-027:is(.button-027--disabled,:disabled){opacity:.5;pointer-events:none;cursor:var(--cursor-default,not-allowed)}.button-027:is(.button-027--disabled,:disabled):active{scale:1}.button-027__inner{pointer-events:none;perspective:35em;width:100%;height:100%;transform-style:preserve-3d;grid-area:1/1;place-items:center;display:grid}.button-027__default{width:100%;height:100%;color:var(--button-027-color);transition:translate .75s var(--button-027-ease-hover), rotate .85s var(--button-027-ease-hover), opacity .15s ease-out;grid-area:1/1;display:grid}.button-027__default-bg{background-color:var(--button-027-color-background);border-radius:var(--button-027-border-radius);border:var(--button-027-border);grid-area:1/1;width:100%;height:100%;padding:0}.button-027__default-inner{grid-column-gap:.45em;grid-row-gap:.45em;width:100%;height:100%;padding:var(--button-027-padding);grid-area:1/1;justify-content:center;align-items:center;display:flex}.button-027__hover{width:100%;height:100%;color:var(--button-027-hover-color);transition:translate .85s var(--button-027-ease-hover), rotate .75s var(--button-027-ease-hover), opacity .15s ease-out;opacity:0;grid-area:1/1;display:grid;translate:0 2em -8em;rotate:x -90deg}.button-027__hover-bg{border-radius:var(--button-027-border-radius);background-color:var(--button-027-hover-color-background);border:var(--button-027-hover-border);grid-area:1/1;width:100%;height:100%;padding:0}.button-027__hover-inner{grid-column-gap:.45em;grid-row-gap:.45em;width:100%;height:100%;padding:var(--button-027-padding);grid-area:1/1;justify-content:center;align-items:center;display:flex}.button-027__icon{flex:none;justify-content:center;align-items:center;font-size:1.1em;line-height:1;display:inline-flex}.button-027__icon svg{width:.9em;height:.9em;display:block}.button-027__icon--state{place-items:center;display:grid}.button-027__icon--state svg{transition:opacity .18s var(--ease-smooth), rotate .45s var(--ease-osmo), scale .45s var(--ease-osmo);grid-area:1/1}.button-027__state-play{opacity:1;rotate:0deg;scale:1}.button-027__state-pause{opacity:0;rotate:-45deg;scale:.5}.button-027[data-playing=true] .button-027__state-play{opacity:0;rotate:45deg;scale:.5}.button-027[data-playing=true] .button-027__state-pause{opacity:1;rotate:0deg;scale:1}@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.button-027:not(.button-027--disabled,:disabled):is(:hover,:focus-visible) .button-027__default,[data-hover]:is(:hover,:focus-visible) .button-027:not(.button-027--disabled,:disabled) .button-027__default{opacity:0;transition-delay:50ms;translate:0 -2em -8em;rotate:x 90deg}.button-027:not(.button-027--disabled,:disabled):is(:hover,:focus-visible) .button-027__hover,[data-hover]:is(:hover,:focus-visible) .button-027:not(.button-027--disabled,:disabled) .button-027__hover{transition:translate .75s 50ms var(--button-027-ease-hover), rotate .85s 50ms var(--button-027-ease-hover), opacity 75ms 50ms ease-in;opacity:1;translate:0;rotate:x 0deg}}
