.spinner{--track-width:0.1em;--speed:3s;--small:1rem;--medium:1.5rem;inline-size:1em;aspect-ratio:1;&.small{font-size:var(--small);margin:0 var(--spacing-4)}&.medium{font-size:var(--medium);margin:0 var(--spacing-8)}.spinner__indicator{fill:none;cx:.5em;cy:.5em;r:calc(.5em - var(--track-width) / 2);stroke:currentcolor;stroke-linecap:round;stroke-dasharray:150% 75%;stroke-width:var(--track-width);animation:spin var(--speed) linear infinite;transform-origin:50% 50%}}@keyframes spin{0%{transform:rotate(0deg);stroke-dasharray:.05em,3em}50%{transform:rotate(450deg);stroke-dasharray:1em,1em}to{transform:rotate(3turn);stroke-dasharray:.05em,3em}}.button--outlined,.button--text{background-color:transparent}.button--filled.button--primary{background-color:var(--color-cta-primary-default);color:var(--color-textInteractive-onPrimary-default);&:hover{background-color:var(--color-cta-primary-hover);color:var(--color-textInteractive-onPrimary-hover)}&:focus{background-color:var(--color-cta-primary-focus);color:var(--color-textInteractive-onPrimary-focus)}&:active{background-color:var(--color-cta-primary-pressed);color:var(--color-textInteractive-onPrimary-pressed)}&:disabled{background-color:var(--color-cta-primary-disabled);color:var(--color-textInteractive-onPrimary-disabled)}}.button--filled.button--secondary{background-color:var(--color-cta-secondary-default);color:var(--color-textInteractive-onSecondary-default);&:hover{background-color:var(--color-cta-secondary-hover);color:var(--color-textInteractive-onSecondary-hover);outline-color:var(--color-cta-secondary-hover)}&:focus{background-color:var(--color-cta-secondary-focus);color:var(--color-textInteractive-onSecondary-focus);outline-color:var(--color-cta-secondary-focus)}&:active{background-color:var(--color-cta-secondary-pressed);color:var(--color-textInteractive-onSecondary-pressed);outline-color:var(--color-cta-secondary-pressed)}&:disabled{background-color:var(--color-cta-secondary-disabled);color:var(--color-textInteractive-onSecondary-disabled);outline-color:var(--color-cta-secondary-disabled)}}.button--filled.button--error{background-color:var(--color-cta-error-default);color:var(--color-textInteractive-onError-default);&:hover{background-color:var(--color-cta-error-hover);color:var(--color-textInteractive-onError-hover)}&:focus{background-color:var(--color-cta-error-focus);color:var(--color-textInteractive-onError-focus)}&:active{background-color:var(--color-cta-error-pressed);color:var(--color-textInteractive-onError-pressed)}&:disabled{background-color:var(--color-cta-error-disabled);color:var(--color-textInteractive-onError-disabled)}}.button--filled.button--inverse-strong{background-color:var(--color-cta-inverseStrong-default);color:var(--color-textInteractive-onInverseStrong-default);&:hover{background-color:var(--color-cta-inverseStrong-hover);color:var(--color-textInteractive-onInverseStrong-hover)}&:focus{background-color:var(--color-cta-inverseStrong-focus);color:var(--color-textInteractive-onInverseStrong-focus)}&:active{background-color:var(--color-cta-inverseStrong-pressed);color:var(--color-textInteractive-onInverseStrong-pressed)}&:disabled{background-color:var(--color-cta-inverseStrong-disabled);color:var(--color-textInteractive-onInverseStrong-disabled)}}.button--filled.button--inverse-soft-primary{background-color:var(--color-cta-inverseSoft-default);color:var(--color-textInteractive-primary-default);&:hover{background-color:var(--color-cta-inverseSoft-hover);color:var(--color-textInteractive-primary-hover)}&:focus{background-color:var(--color-cta-inverseSoft-focus);color:var(--color-textInteractive-primary-focus)}&:active{background-color:var(--color-cta-inverseSoft-pressed);color:var(--color-textInteractive-primary-pressed)}&:disabled{background-color:var(--color-cta-inverseSoft-disabled);color:var(--color-textInteractive-primary-disabled)}}.button--filled.button--inverse-soft-secondary{background-color:var(--color-cta-inverseSoft-default);color:var(--color-textInteractive-secondary-default);&:hover{background-color:var(--color-cta-inverseSoft-hover);color:var(--color-textInteractive-secondary-hover)}&:focus{background-color:var(--color-cta-inverseSoft-focus);color:var(--color-textInteractive-secondary-focus)}&:active{background-color:var(--color-cta-inverseSoft-pressed);color:var(--color-textInteractive-secondary-pressed)}&:disabled{background-color:var(--color-cta-inverseSoft-disabled);color:var(--color-textInteractive-secondary-disabled)}}.button--outlined{outline-width:var(--width-3);outline-style:solid;outline-offset:calc(var(--width-3) * -1)}.button--outlined.button--primary{outline-color:var(--color-borderInteractive-primary-default);color:var(--color-textInteractive-primary-default);&:hover{outline-color:var(--color-borderInteractive-primary-hover);color:var(--color-textInteractive-primary-hover)}&:focus{outline-color:var(--color-borderInteractive-primary-focus);color:var(--color-textInteractive-primary-focus)}&:active{outline-color:var(--color-borderInteractive-primary-pressed);color:var(--color-textInteractive-primary-pressed)}&:disabled{outline-color:var(--color-borderInteractive-primary-disabled);color:var(--color-textInteractive-primary-disabled)}}.button--outlined.button--secondary{outline-color:var(--color-borderInteractive-secondary-default);color:var(--color-textInteractive-secondary-default);&:hover{outline-color:var(--color-borderInteractive-secondary-hover);color:var(--color-textInteractive-secondary-hover)}&:focus{outline-color:var(--color-borderInteractive-secondary-focus);color:var(--color-textInteractive-secondary-focus)}&:active{outline-color:var(--color-borderInteractive-secondary-pressed);color:var(--color-textInteractive-secondary-pressed)}&:disabled{outline-color:var(--color-borderInteractive-secondary-disabled);color:var(--color-textInteractive-secondary-disabled)}}.button--outlined.button--error{outline-color:var(--color-borderInteractive-error-default);color:var(--color-textInteractive-error-default);&:hover{outline-color:var(--color-borderInteractive-error-hover);color:var(--color-textInteractive-error-hover)}&:focus{outline-color:var(--color-borderInteractive-error-focus);color:var(--color-textInteractive-error-focus)}&:active{outline-color:var(--color-borderInteractive-error-pressed);color:var(--color-textInteractive-error-pressed)}&:disabled{outline-color:var(--color-borderInteractive-error-disabled);color:var(--color-textInteractive-error-disabled)}}.button--outlined.button--inverse-strong{outline-color:var(--color-borderInteractive-inverseStrong-default);color:var(--color-textInteractive-inverseStrong-default);&:hover{outline-color:var(--color-borderInteractive-inverseStrong-hover);color:var(--color-textInteractive-inverseStrong-hover)}&:focus{outline-color:var(--color-borderInteractive-inverseStrong-focus);color:var(--color-textInteractive-inverseStrong-focus)}&:active{outline-color:var(--color-borderInteractive-inverseStrong-pressed);color:var(--color-textInteractive-inverseStrong-pressed)}&:disabled{outline-color:var(--color-borderInteractive-inverseStrong-disabled);color:var(--color-textInteractive-inverseStrong-disabled)}}.button--outlined.button--inverse-soft-primary{outline-color:var(--color-borderInteractive-inverseSoft-default);color:var(--color-textInteractive-onPrimary-default);&:hover{outline-color:var(--color-borderInteractive-inverseSoft-hover);color:var(--color-textInteractive-onPrimary-hover)}&:focus{outline-color:var(--color-borderInteractive-inverseSoft-focus);color:var(--color-textInteractive-onPrimary-focus)}&:active{outline-color:var(--color-borderInteractive-inverseSoft-pressed);color:var(--color-textInteractive-onPrimary-pressed)}&:disabled{outline-color:var(--color-borderInteractive-inverseSoft-disabled);color:var(--color-textInteractive-onPrimary-disabled)}}.button--outlined.button--inverse-soft-secondary{outline-color:var(--color-borderInteractive-inverseSoft-default);color:var(--color-textInteractive-onSecondary-default);&:hover{outline-color:var(--color-borderInteractive-inverseSoft-hover);color:var(--color-textInteractive-onSecondary-hover)}&:focus{outline-color:var(--color-borderInteractive-inverseSoft-focus);color:var(--color-textInteractive-onSecondary-focus)}&:active{outline-color:var(--color-borderInteractive-inverseSoft-pressed);color:var(--color-textInteractive-onSecondary-pressed)}&:disabled{outline-color:var(--color-borderInteractive-inverseSoft-disabled);color:var(--color-textInteractive-onSecondary-disabled)}}.button--text.button--primary{color:var(--color-textInteractive-primary-default);&:hover{color:var(--color-textInteractive-primary-hover)}&:focus{color:var(--color-textInteractive-primary-focus)}&:active{color:var(--color-textInteractive-primary-pressed)}&:disabled{color:var(--color-textInteractive-primary-disabled)}}.button--text.button--secondary{color:var(--color-textInteractive-secondary-default);&:hover{color:var(--color-textInteractive-secondary-hover)}&:focus{color:var(--color-textInteractive-secondary-focus)}&:active{color:var(--color-textInteractive-secondary-pressed)}&:disabled{color:var(--color-textInteractive-secondary-disabled)}}.button--text.button--inverse-strong{color:var(--color-textInteractive-inverseStrong-default);&:hover{color:var(--color-textInteractive-inverseStrong-hover)}&:focus{color:var(--color-textInteractive-inverseStrong-focus)}&:active{color:var(--color-textInteractive-inverseStrong-pressed)}&:disabled{color:var(--color-textInteractive-inverseStrong-disabled)}}.button--text.button--error{color:var(--color-textInteractive-error-default);&:hover{color:var(--color-textInteractive-error-hover)}&:focus{color:var(--color-textInteractive-error-focus)}&:active{color:var(--color-textInteractive-error-pressed)}&:disabled{color:var(--color-textInteractive-error-disabled)}}.button--text.button--inverse-soft-primary{color:var(--color-textInteractive-onPrimary-default);&:hover{color:var(--color-textInteractive-onPrimary-hover)}&:focus{color:var(--color-textInteractive-onPrimary-focus)}&:active{color:var(--color-textInteractive-onPrimary-pressed)}&:disabled{color:var(--color-textInteractive-onPrimary-disabled)}}.button--text.button--inverse-soft-secondary{color:var(--color-textInteractive-onSecondary-default);&:hover{color:var(--color-textInteractive-onSecondary-hover)}&:focus{color:var(--color-textInteractive-onSecondary-focus)}&:active{color:var(--color-textInteractive-onSecondary-pressed)}&:disabled{color:var(--color-textInteractive-onSecondary-disabled)}}.button{cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-48);transition:all .3s ease-in-out;text-decoration:none;border:none}.button--disabled{cursor:not-allowed}.button--loading{cursor:wait}.button__icon-wrapper{display:flex;align-items:center;justify-content:center}.button--no-spacing,.button--no-spacing-medium,.button--no-spacing-small{padding:var(--spacing-0)}.button--extra-small{padding:var(--spacing-8);min-height:32px}.button--small{min-height:40px}.button--medium,.button--small{padding:var(--spacing-12) var(--spacing-16)}.button--medium{min-height:48px}.button--large{padding:var(--spacing-16);gap:var(--spacing-12);min-height:56px}.button--extra-small,.button--no-spacing,.button--no-spacing-small,.button--small{gap:var(--spacing-4)}.button--medium,.button--no-spacing-medium{gap:var(--spacing-8)}.button__text{white-space:nowrap}