.button {
    --buttonHeight: 3rem;
    --buttonFontSize: 1rem;
    --buttonLineHeight: 1.5;

    --buttonPrimaryColor: #FFFFFF;
    --buttonPrimaryBackgroundColor: var(--primaryColorDark);
    --buttonPrimaryHoverColor: #FFFFFF;
    --buttonPrimaryHoverBackgroundColor: var(--primaryColor);
    --buttonPrimaryFocusColor: #FFFFFF;
    --buttonPrimaryFocusBackgroundColor: var(--primaryColorDark);

    --buttonPrimaryGhostColor: var(--primaryColorDark);
    --buttonPrimaryGhostBackgroundColor: #FFFFFF;
    --buttonPrimaryGhostBorderColor: var(--buttonPrimaryGhostColor);
    --buttonPrimaryGhostHoverBackgroundColor: var(--primaryColor);
    --buttonPrimaryGhostHoverBackgroundColor: color-mix(in srgb, var(--primaryColor), #FFFFFF 95%);
    --buttonPrimaryGhostHoverBorderColor: var(--primaryColor);
    --buttonPrimaryGhostHoverColor: var(--buttonPrimaryGhostHoverBorderColor);

    --buttonSecondaryColor: #000000;
    --buttonSecondaryBackgroundColor: var(--secondaryColor);
    --buttonSecondaryHoverColor: #000000;
    --buttonSecondaryHoverBackgroundColor: var(--secondaryColorDark);
    --buttonSecondaryHoverBackgroundColor: color-mix(in srgb, var(--secondaryColor), #000000 10%);
    --buttonSecondaryFocusColor: #000000;
    --buttonSecondaryFocusBackgroundColor: var(--secondaryColor);

    --buttonSecondaryGhostColor: var(--secondaryColor);
    --buttonSecondaryGhostBackgroundColor: #FFFFFF;
    --buttonSecondaryGhostBorderColor: var(--buttonSecondaryGhostColor);
    --buttonSecondaryGhostHoverBackgroundColor: var(--secondaryColor);
    --buttonSecondaryGhostHoverBackgroundColor: color-mix(in srgb, var(--secondaryColor), #FFFFFF 95%);
    --buttonSecondaryGhostHoverBorderColor: var(--secondaryColorDark);
    --buttonSecondaryGhostHoverBorderColor: color-mix(var(--secondaryColor), #000000 10%);
    --buttonSecondaryGhostHoverColor: var(--buttonSecondaryGhostHoverBorderColor);

    --buttonTertiaryColor: #FFFFFF;
    --buttonTertiaryBackgroundColor: var(--tertiaryColor);
    --buttonTertiaryHoverColor: #FFFFFF;
    --buttonTertiaryHoverBackgroundColor: var(--tertiaryColorDark);
    --buttonTertiaryHoverBackgroundColor: color-mix(in srgb var(--tertiaryColor), #000000 10%);
    --buttonTertiaryFocusColor: #FFFFFF;
    --buttonTertiaryFocusBackgroundColor: var(--tertiaryColor);

    --buttonTertiaryGhostColor: var(--tertiaryColor);
    --buttonTertiaryGhostBackgroundColor: #FFFFFF;
    --buttonTertiaryGhostBorderColor: var(--buttonTertiaryGhostColor);
    --buttonTertiaryGhostHoverBackgroundColor: var(--tertiaryColor);
    --buttonTertiaryGhostHoverBackgroundColor: color-mix(in srgb var(--tertiaryColor), #FFFFFF 95%);
    --buttonTertiaryGhostHoverBorderColor: var(--tertiaryColorDark);
    --buttonTertiaryGhostHoverBorderColor: color-mix(in srgb var(--tertiaryColor), #000000 10%);
    --buttonTertiaryGhostHoverColor: var(--buttonTertiaryGhostHoverBorderColor);
}
.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: bold;
    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.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 rgb(0 0 0 / 15%);
}
.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 rgb(0 0 0 / 15%);
}
.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 rgb(0 0 0 / 15%);
}
.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;
}