@layer component{.button{background-color:var(--color-primary);cursor:pointer;border-radius:70px;justify-content:center;align-items:center;width:144px;height:48px;padding:0 20px;display:inline-flex;position:relative}.button:before{background-color:var(--color-white);content:"";will-change:width,height,right;border-radius:70px;width:8px;height:8px;margin:auto;transition:width .36s cubic-bezier(.57,.03,.48,1.01),height .36s cubic-bezier(.57,.03,.48,1.01),right .36s cubic-bezier(.57,.03,.48,1.01);display:block;position:absolute;top:0;bottom:0;right:20px}.button span{color:var(--color-white);font-size:.875rem;font-weight:var(--font-weight-bold);will-change:color;z-index:2;justify-content:space-between;align-items:center;width:100%;line-height:1.5;transition:color .28s cubic-bezier(.19,.59,.74,.94);display:inline-flex;position:relative}.button span:after{background-color:var(--color-white);content:"";will-change:background-color;border-radius:50%;width:8px;height:8px;transition:background-color .28s cubic-bezier(.19,.59,.74,.94);display:inline-block}.button--form{background-color:var(--color-gray-100);pointer-events:none;transition:background-color .24s cubic-bezier(.06,.68,.68,.93)}.button--form.is-active{background-color:var(--color-primary);pointer-events:auto}.button--white{background-color:var(--color-white);color:var(--color-primary)}.button--white:before{background-color:var(--color-primary)}.button--white span{color:var(--color-primary)}.button--white span:after{background-color:var(--color-primary)}@media (hover:hover) and (pointer:fine){.button:hover:before{width:calc(100% - 4px);height:calc(100% - 4px);right:2px}.button:hover span{color:var(--color-primary)}.button:hover span:after{background-color:var(--color-primary)}.button--white:hover span{color:var(--color-white)}.button--white:hover span:after{background-color:var(--color-white)}}@media print and (width>=768px),screen and (width>=768px){.button{width:176px;height:56px;padding:0 24px}.button:before{right:24px}.button span{font-size:1.125rem}}}