[data-component=button-circle][data-v-2b1df01a]{--icon-color:var(--buttonCircle-color,var(--color-brown-500));position:relative;display:flex;align-items:center;justify-content:center;width:clamp(68px,63.242px + 100vw * .0122,84px);height:clamp(48px,43.242px + 100vw * .0122,64px);transition-property:scale;transition-duration:.25s;transition-timing-function:cubic-bezier(.55,.085,.68,.53);--transition-timing:.45s;--transition-bg-timing:.325s;--transition-bg-ease:cubic-bezier(.86,0,.07,1);--transition-ease:cubic-bezier(.68,-.55,.265,1.55);margin:0;transition-property:transform;transition-duration:var(--transition-timing);transition-timing-function:var(--transition-ease)}[data-component=button-circle][data-v-2b1df01a]:before{content:"";position:absolute;left:-20px;top:-20px;width:calc(100% + 40px);height:calc(100% + 40px)}[data-component=button-circle][data-icon-size=large][data-v-2b1df01a]{width:clamp(52px,48.412px + 100vw * .0092,64px);height:clamp(33px,29.724px + 100vw * .0084,44px)}[data-component=button-circle][data-mousedown][data-v-2b1df01a]{scale:.98;transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-component=button-circle] .bg[data-v-2b1df01a]{position:absolute;inset:0;display:block;background-color:var(--buttonCircle-backgroundColor,var(--color-creme-200));border:1px solid var(--buttonCircle-borderColor,transparent);border-radius:clamp(42px,65.343px + 100vw * -.0137,60px);transition-property:scale;transition-duration:var(--transition-timing);transition-timing-function:var(--transition-ease)}[data-component=button-circle] .icon-wrapper[data-v-2b1df01a]{z-index:1;flex-direction:row;overflow:hidden}[data-component=button-circle] .icon-container[data-v-2b1df01a],[data-component=button-circle] .icon-wrapper[data-v-2b1df01a]{width:100%;height:100%;position:relative;display:flex;justify-content:center;align-items:center}[data-component=button-circle] .icon-container[data-v-2b1df01a]{--icon-translateX:0%;--icon-translateY:0%;--icon-rotate:0deg;--icon-morphX:0%;--icon-morphY:0%;transform:translate(calc(var(--icon-translateX) + var(--icon-morphX))) translateY(calc(var(--icon-translateY) + var(--icon-morphY))) rotate(var(--icon-rotate));transform-origin:50% 50%;transition-property:transform;transition-duration:calc(var(--transition-timing)*1.5);transition-timing-function:cubic-bezier(.77,0,.175,1)}[data-component=button-circle] .icon-container.ghost[data-v-2b1df01a]{position:absolute;background-color:transparent;height:100%;padding:0;width:100%;top:100%}[data-component=button-circle] .icon-container.ghost.close[data-v-2b1df01a]{top:auto;left:100%}[data-component=button-circle] .icon-container.ghost.play[data-v-2b1df01a]{top:auto;left:-100%}[data-component=button-circle] .icon-container.ghost.morph[data-v-2b1df01a]{transform:translate(var(--icon-morphX)) translateY(var(--icon-morphY))}[data-component=button-circle][data-v-2b1df01a] [data-component=icon]{right:0;left:0;bottom:0;transition-property:right,left,bottom;transition-duration:var(--transition-timing);transition-timing-function:var(--transition-ease)}@media(hover:hover){[data-component=button-circle][data-v-2b1df01a]:hover,[data-component=button-circle][data-hover][data-v-2b1df01a]{transform:scale(.98)}[data-component=button-circle]:hover .bg[data-v-2b1df01a],[data-component=button-circle][data-hover] .bg[data-v-2b1df01a]{scale:.925}[data-component=button-circle]:hover.clicked .icon-wrapper[data-v-2b1df01a],[data-component=button-circle][data-hover].clicked .icon-wrapper[data-v-2b1df01a]{margin:0}[data-component=button-circle]:hover .icon-container[data-v-2b1df01a],[data-component=button-circle][data-hover] .icon-container[data-v-2b1df01a]{--icon-morphX:0px;--icon-morphY:0px;--icon-translateY:-100%}[data-component=button-circle]:hover .icon-container.play[data-v-2b1df01a],[data-component=button-circle][data-hover] .icon-container.play[data-v-2b1df01a]{--icon-translateY:0%;--icon-translateX:100%}[data-component=button-circle]:hover .icon-container.close[data-v-2b1df01a],[data-component=button-circle][data-hover] .icon-container.close[data-v-2b1df01a]{--icon-translateY:0%;--icon-translateX:-100%}}@media only screen and (min-width:2000px){[data-component=button-circle][data-v-2b1df01a]{width:4.2vw;height:3.2vw}[data-component=button-circle][data-icon-size=large][data-v-2b1df01a]{width:3.2vw;height:2.2vw}[data-component=button-circle] .bg[data-v-2b1df01a]{border-radius:2.1vw}}