.button {
    --color: pink;
    --background-color: blue;
    display: inline-block;
    border-radius: var(--tBorderRadius);
    padding: var(--tButtonPadding);
    text-decoration: none;
    text-transform: uppercase;
    font-size: var(--tFontSizeSmall);
    line-height: var(--tLineHeightDefault);
    font-weight: bold;
    letter-spacing: var(--tSpacedTextLetterSpacing);
    text-align: center;
    color: var(--color);
    background-color: var(--background-color);
    border: var(--tBorderWidth) solid var(--background-color);
    box-sizing: border-box;
    margin: var(--tButtonMargin);
}

.button[disabled] {
    opacity: 0.5;
}

.button:not([disabled]):hover {
    text-decoration: none;
    --color: pink;
    --background-color: green;
}
.button:not([disabled]):focus {
    outline: var(--tOutlineColor) solid var(--tBorderWidth);
}

.button.button--primary {
    --color: var(--tButtonPrimaryFgColor);
    --background-color: var(--tButtonPrimaryBgColor);
}
.button.button--primary:not([disabled]):hover {
    --color: var(--tButtonPrimaryHoverFgColor);
    --background-color: var(--tButtonPrimaryHoverBgColor);
}
.button.button--primary:not([disabled]):focus {
    outline: var(--tOutlineColor) solid var(--tBorderWidth);
}


.button.button--default {
    --color: var(--tButtonDefaultFgColor);
    --background-color: var(--tButtonDefaultBgColor);
}
.button.button--default:not([disabled]):hover {
    --color: var(--tButtonDefaultHoverFgColor);
    --background-color: var(--tButtonDefaultHoverBgColor);
}
.button.button--default:not([disabled]):focus {
    outline: var(--tOutlineColor) solid var(--tBorderWidth);
}

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

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

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