.button {
    --color: var(--apButtonInvalidVariantFgColor);
    --background-color: var(--apButtonInvalidVariantBgColor);
    display: inline-block;
    border-radius: var(--apBorderRadius);
    padding: var(--apButtonPadding);
    text-decoration: none;
    text-transform: uppercase;
    font-size: var(--apFontSizeSmall);
    line-height: var(--apLineHeightDefault);
    font-weight: bold;
    letter-spacing: var(--spacedTextLetterSpacing);
    text-align: center;
    color: var(--color);
    background-color: var(--background-color);
    border: var(--apBorderWidth) solid var(--background-color);
    box-sizing: border-box;
    margin: var(--apButtonMargin);
}

.button[disabled] {
    opacity: 0.5;
}

.button:not([disabled]):hover {
    text-decoration: none;
    --color: var(--apButtonInvalidVariantHoverFgColor);
    --background-color: var(--apButtonInvalidVariantHoverBgColor);
}
.button:not([disabled]):focus {
    outline: var(--apOutlineColor) solid var(--apBorderWidth);
}

.button.button--primary {
    --color: var(--apButtonPrimaryFgColor);
    --background-color: var(--apButtonPrimaryBgColor);
}
.button.button--primary:not([disabled]):hover {
    --color: var(--apButtonPrimaryHoverFgColor);
    --background-color: var(--apButtonPrimaryHoverBgColor);
}
.button.button--primary:not([disabled]):focus {
    outline: var(--apOutlineColor) solid var(--apBorderWidth);
}


.button.button--default {
    --color: var(--apButtonDefaultFgColor);
    --background-color: var(--apButtonDefaultBgColor);
}
.button.button--default:not([disabled]):hover {
    --color: var(--apButtonDefaultHoverFgColor);
    --background-color: var(--apButtonDefaultHoverBgColor);
}
.button.button--default:not([disabled]):focus {
    outline: var(--apOutlineColorAlt) solid var(--apBorderWidth);
}

.button.button--large {
    padding: var(--apButtonPaddingLarge);
}

.button.button--wide {
    padding-left: var(--apButtonPaddingSidesWide);
    padding-right: var(--apButtonPaddingSidesWide);
}

.button.button--block {
    display: block;
    width: 100%;
}