.button{--buttonHeight: 3rem;--buttonFontSize: 1rem;--buttonLineHeight: 1.5;--buttonPrimaryColor: #FFFFFF;--buttonPrimaryBackgroundColor: var(--ds-color-primary-600);--buttonPrimaryHoverColor: #FFFFFF;--buttonPrimaryHoverBackgroundColor: var(--ds-color-primary-500);--buttonPrimaryFocusColor: #FFFFFF;--buttonPrimaryFocusBackgroundColor: var(--ds-color-primary-600);--buttonPrimaryGhostColor: var(--ds-color-primary-700);--buttonPrimaryGhostBackgroundColor: #FFFFFF;--buttonPrimaryGhostBorderColor: var(--buttonPrimaryGhostColor);--buttonPrimaryGhostHoverBackgroundColor: var(--ds-color-primary-500);--buttonPrimaryGhostHoverBackgroundColor: color-mix(in srgb, var(--ds-color-primary-500), #FFFFFF 95%);--buttonPrimaryGhostHoverBorderColor: var(--ds-color-primary-500);--buttonPrimaryGhostHoverColor: var(--buttonPrimaryGhostHoverBorderColor);--buttonSecondaryColor: var(--ds-color-grey-20);--buttonSecondaryBackgroundColor: var(--ds-color-secondary-400);--buttonSecondaryHoverColor: var(--ds-color-grey-20);--buttonSecondaryHoverBackgroundColor: var(--ds-color-secondary-900);--buttonSecondaryHoverBackgroundColor: color-mix(in srgb, var(--ds-color-secondary-400), #000000 10%);--buttonSecondaryFocusColor: var(--ds-color-grey-20);--buttonSecondaryFocusBackgroundColor: var(--ds-color-secondary-400);--buttonSecondaryGhostColor: var(--ds-color-secondary-400);--buttonSecondaryGhostBackgroundColor: #FFFFFF;--buttonSecondaryGhostBorderColor: var(--buttonSecondaryGhostColor);--buttonSecondaryGhostHoverBackgroundColor: var(--ds-color-secondary-400);--buttonSecondaryGhostHoverBackgroundColor: color-mix(in srgb, var(--ds-color-secondary-400), #FFFFFF 95%);--buttonSecondaryGhostHoverBorderColor: var(--ds-color-secondary-900);--buttonSecondaryGhostHoverBorderColor: color-mix(in srgb, var(--secondaryColor), #000000 10%);--buttonSecondaryGhostHoverColor: var(--buttonSecondaryGhostHoverBorderColor);--buttonTertiaryColor: var(--ds-color-grey-20);--buttonTertiaryBackgroundColor: var(--ds-color-cta-500);--buttonTertiaryHoverColor: var(--ds-color-grey-20);--buttonTertiaryHoverBackgroundColor: var(--tertiaryColorDark);--buttonTertiaryHoverBackgroundColor: color-mix(in srgb, var(--ds-color-cta-500), #000000 10%);--buttonTertiaryFocusColor: var(--ds-color-grey-20);--buttonTertiaryFocusBackgroundColor: var(--ds-color-cta-500);--buttonTertiaryGhostColor: var(--ds-color-cta-500);--buttonTertiaryGhostBackgroundColor: #FFFFFF;--buttonTertiaryGhostBorderColor: var(--buttonTertiaryGhostColor);--buttonTertiaryGhostHoverBackgroundColor: var(--ds-color-cta-500);--buttonTertiaryGhostHoverBackgroundColor: color-mix(in srgb, var(--ds-color-cta-500), #FFFFFF 95%);--buttonTertiaryGhostHoverBorderColor: var(--tertiaryColorDark);--buttonTertiaryGhostHoverBorderColor: color-mix(in srgb, var(--ds-color-cta-500), #000000 10%);--buttonTertiaryGhostHoverColor: var(--buttonTertiaryGhostHoverBorderColor);--buttonModalBackgroundColor: var(--ds-color-secondary-400);--buttonModalBackgroundColorHover: var(--ds-color-secondary-200)}.button{font-size:var(--buttonFontSize);line-height:var(--buttonLineHeight);position:relative;cursor:pointer;width:auto;border-radius:var(--borderRadius);color:var(--buttonColor);display:flex;align-items:center;justify-content:center;-webkit-appearance:none;appearance:none;font-family:var(--fontFamily);font-weight:700;height:var(--buttonHeight);text-decoration:none;border:0;padding:.5rem 1rem;box-shadow:var(--buttonBoxShadow, var(--boxShadow1))}.button:hover{text-decoration:none}.button:disabled{cursor:default;opacity:.5}.button__icon{display:inline-flex}.button.button--plain{background-color:transparent;box-shadow:none}.button.button--primary{color:var(--buttonPrimaryColor);background-color:var(--buttonPrimaryBackgroundColor)}.button.button--primary:hover{color:var(--buttonPrimaryHoverColor);background-color:var(--buttonPrimaryHoverBackgroundColor)}.button.button--primary:focus{color:var(--buttonPrimaryFocusColor);background-color:var(--buttonPrimaryFocusBackgroundColor);outline:none;box-shadow:0 0 2px 3px var(--buttonPrimaryFocusBoxShadowColor)}.button.button--primary:active{color:var(--buttonPrimaryActiveColor, var(--buttonPrimaryHoverColor));background-color:var(--buttonPrimaryActiveBackgroundColor, var(--buttonPrimaryHoverBackgroundColor));box-shadow:inset 0 2px 12px #00000026}.button.button--primary-ghost{color:var(--buttonPrimaryGhostColor);background-color:var(--buttonPrimaryGhostBackgroundColor);border:1px solid var(--buttonPrimaryGhostBorderColor);transition:background-color .2s ease,border-color .2s ease}.button.button--primary-ghost:where(:hover,:focus){background-color:var(--buttonPrimaryGhostHoverBackgroundColor);border-color:var(--buttonPrimaryGhostHoverBorderColor);color:var(--buttonPrimaryGhostHoverColor);outline:none}.button.button--secondary{color:var(--buttonSecondaryColor);background-color:var(--buttonSecondaryBackgroundColor)}.button.button--secondary:hover{color:var(--buttonSecondaryHoverColor);background-color:var(--buttonSecondaryHoverBackgroundColor)}.button.button--secondary:focus{color:var(--buttonSecondaryFocusColor);background-color:var(--buttonSecondaryFocusBackgroundColor);outline:none;box-shadow:0 0 2px 3px var(--buttonSecondaryFocusBoxShadowColor)}.button.button--secondary:active{color:var(--buttonSecondaryActiveColor, var(--buttonSecondaryHoverColor));background-color:var(--buttonSecondaryActiveBackgroundColor, var(--buttonSecondaryHoverBackgroundColor));box-shadow:inset 0 2px 12px #00000026}.button.button--secondary-ghost{color:var(--buttonSecondaryGhostColor);background-color:var(--buttonSecondaryGhostBackgroundColor);border:1px solid var(--buttonSecondaryGhostBorderColor);transition:background-color .2s ease,border-color .2s ease}.button.button--secondary-ghost:where(:focus,:hover){background-color:var(--buttonSecondaryGhostHoverBackgroundColor);border-color:var(--buttonSecondaryGhostHoverBorderColor);color:var(--buttonSecondaryGhostHoverColor);outline:none}.button.button--tertiary{color:var(--buttonTertiaryColor);background-color:var(--buttonTertiaryBackgroundColor)}.button.button--tertiary:hover{color:var(--buttonTertiaryHoverColor);background-color:var(--buttonTertiaryHoverBackgroundColor)}.button.button--tertiary:focus{color:var(--buttonTertiaryFocusColor);background-color:var(--buttonTertiaryFocusBackgroundColor);outline:none;box-shadow:0 0 2px 3px var(--buttonTertiaryFocusBoxShadowColor)}.button.button--tertiary:active{color:var(--buttonTertiaryActiveColor, var(--buttonTertiaryHoverColor));background-color:var(--buttonTertiaryActiveBackgroundColor, var(--buttonTertiaryHoverBackgroundColor));box-shadow:inset 0 2px 12px #00000026}.button.button--tertiary-ghost{color:var(--buttonTertiaryGhostColor);background-color:var(--buttonTertiaryGhostBackgroundColor);border:1px solid var(--buttonTertiaryGhostBorderColor);transition:background-color .2s ease,border-color .2s ease}.button.button--tertiary-ghost:where(:hover,:focus){background-color:var(--buttonTertiaryGhostHoverBackgroundColor);border-color:var(--buttonTertiaryGhostHoverBorderColor);color:var(--buttonTertiaryGhostHoverColor);outline:none}.button--icon-left .button__icon{--icon-size: 1rem;margin-right:.5rem}.button--icon-right .button__icon{--icon-size: 1rem;margin-left:.5rem}