.base-button{--button-padding--lg:2rem;--button-padding--sm:1.125rem;--button-gap--lg:.75rem;--button-gap--sm:.5rem;border-radius:var(--border-radius-full,9999px);box-shadow:none;cursor:pointer;padding-block:.25rem;padding-inline:var(--spacing-sm,.625rem);text-align:left;transition:color var(--transition-fast,.15s ease-in),background-color var(--transition-fast,.15s ease-in),border-color var(--transition-fast,.15s ease-in),transform var(--transition-spring);border:2px solid #fff0;align-items:center;width:auto;text-decoration:none;display:inline-flex;position:relative}@media screen and (width<=64em){.base-button{font-family:var(--font-family-secondary);font-size:1.125rem;font-weight:600;line-height:1.4}}@media screen and (width>=64.0625em){.base-button{font-family:var(--font-family-secondary);font-size:1.25rem;font-weight:600;line-height:1.4}}.base-button:before{background-color:inherit;border-radius:inherit;content:"";opacity:0;pointer-events:none;transition:var(--transition-spring);z-index:0;position:absolute;inset:0;transform:scale(.5)}.base-button .icon,.base-button span{z-index:1}.base-button:active{transform:scale(.95)}.base-button:focus{box-shadow:none;outline:none}.base-button:focus-visible{border-color:var(--color-mma-petrol)}.base-button.base-button--hover:before,.base-button:active:before,.base-button:focus-visible:before,.base-button:hover:before{opacity:1;transform:scale(1)}.base-button[disabled]{pointer-events:none}.base-button--with-icon:not(.base-button--icon-only){position:relative;overflow:hidden}.base-button--with-icon:not(.base-button--icon-only) .icon,.base-button--with-icon:not(.base-button--icon-only) span{transition:transform var(--transition-spring)}.base-button--with-icon:not(.base-button--icon-only):has(.iconify--marker.right){padding-right:calc(var(--button-padding) + var(--button-gap) + 1.25rem)}:is(.base-button--with-icon:not(.base-button--icon-only):has(.iconify--marker.right).base-button--hover,.base-button--with-icon:not(.base-button--icon-only):has(.iconify--marker.right):active,.base-button--with-icon:not(.base-button--icon-only):has(.iconify--marker.right):focus-visible,.base-button--with-icon:not(.base-button--icon-only):has(.iconify--marker.right):hover) span{transform:translateX(calc(var(--button-gap) + 1.25rem))}.base-button--with-icon:not(.base-button--icon-only) .iconify--marker{transition:transform var(--transition-spring);position:absolute}.base-button--with-icon:not(.base-button--icon-only) .iconify--marker.right{right:var(--button-padding)}.base-button--with-icon:not(.base-button--icon-only) .iconify--marker.left{left:var(--button-padding);transform:translateX(calc(-100% - var(--button-padding) - var(--button-gap)))}:is(.base-button--with-icon:not(.base-button--icon-only).base-button--hover,.base-button--with-icon:not(.base-button--icon-only):active,.base-button--with-icon:not(.base-button--icon-only):focus-visible,.base-button--with-icon:not(.base-button--icon-only):hover) .iconify--marker.right{transform:translateX(calc(100% + var(--button-padding) + var(--button-gap)))}:is(.base-button--with-icon:not(.base-button--icon-only).base-button--hover,.base-button--with-icon:not(.base-button--icon-only):active,.base-button--with-icon:not(.base-button--icon-only):focus-visible,.base-button--with-icon:not(.base-button--icon-only):hover) .iconify--marker.left{transform:translate(0)}.base-button--primary{background-color:var(--color-palette-primary);color:var(--color-palette-text-secondary)}.base-button--primary:before{background-color:var(--color-white-alpha-10)}.base-button--primary[disabled]{opacity:.4}.base-button--secondary{background-color:var(--color-lightest);color:var(--color-mma-petrol)}.base-button--secondary:before{background-color:var(--color-mma-petrol-alpha-10)}.base-button--secondary[disabled]{opacity:.5}.base-button--transparent{color:var(--color-mma-petrol);background-color:#0000}.base-button--transparent:before{background-color:var(--color-lightest)}.base-button--transparent:focus-visible{background-color:var(--color-palette-background-alpha-10)}.base-button--transparent[disabled]{opacity:.5}.base-button--outlined{border-color:var(--color-petrol);color:var(--color-mma-petrol);background-color:#0000}.base-button--outlined.base-button--hover,.base-button--outlined:active,.base-button--outlined:hover{background-color:var(--color-mma-petrol);border-color:var(--color-mma-petrol);color:var(--color-lightest)}.base-button--outlined:focus-visible{background-color:var(--color-palette-background-alpha-10);border-color:var(--color-mma-petrol)}.base-button--outlined[disabled]{opacity:.5}.base-button--small{font-family:var(--font-family-secondary);--button-padding:var(--button-padding--sm);--button-gap:var(--button-gap--sm);gap:var(--button-gap);min-height:2.5rem;padding-inline:var(--button-padding);border-width:2px;font-size:1.125rem;font-weight:600;line-height:1.4}.base-button--small .iconify{font-size:1.25rem}.base-button--large{font-family:var(--font-family-secondary);--button-padding:var(--button-padding--lg);--button-gap:var(--button-gap--lg);gap:var(--button-gap);min-height:3.625rem;padding-inline:var(--button-padding);border-width:3px;font-size:1.25rem;font-weight:600;line-height:1.4}.base-button--large .iconify{font-size:1.5rem}@media screen and (width<=64em){.base-button--responsive{font-family:var(--font-family-secondary);--button-padding:var(--button-padding--sm);--button-gap:var(--button-gap--sm);gap:var(--button-gap);min-height:2.5rem;padding-inline:var(--button-padding);border-width:2px;font-size:1.125rem;font-weight:600;line-height:1.4}.base-button--responsive .iconify{font-size:1.25rem}}@media screen and (width>=64.0625em){.base-button--responsive{font-family:var(--font-family-secondary);--button-padding:var(--button-padding--lg);--button-gap:var(--button-gap--lg);gap:var(--button-gap);min-height:3.625rem;padding-inline:var(--button-padding);border-width:3px;font-size:1.25rem;font-weight:600;line-height:1.4}.base-button--responsive .iconify{font-size:1.5rem}}.base-button--icon-only{aspect-ratio:1;justify-content:center;align-items:center;gap:0;padding:0}.base-button--icon-only .iconify{font-size:1.5rem}.base-button--icon-only.base-button--small{height:2.75rem}.base-button--icon-only.base-button--large{height:3.625rem}@media screen and (width<=64em){.base-button--icon-only.base-button--responsive{height:2.75rem}}@media screen and (width>=64.0625em){.base-button--icon-only.base-button--responsive{height:3.625rem}}.base-button--loading .icon{animation:1s infinite spin}@keyframes spin{to{transform:rotate(1turn)}}
