button,
.button {
    border: 1px solid;
}

.button:active,
.button.active,
.button.activated {
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
}

/* Theme default */
.button.button-default,
.button.button-default:active,
.button.button-default.active,
.button.button-default.activated {
    border-color: var(--colorDefault50, #dfdfdf);
}

.button.button-default:active,
.button.button-default.active,
.button.button-default.activated {
    background: var(--colorDefault50, #dfdfdf);
}

/* Light */
.button.button-light,
.button.button-light:active,
.button.button-light.activated {
    border-color: var(--colorLight50, #dfdfdf);
}

.button.button-light:active,
.button.button-light.activated {
    background: var(--colorLight50, #dfdfdf);
}



/* Button Outline */
.button.button-default.button-outline {
    border-color: var(--colorDefault60, #bbbbbb);
    background: transparent;
}

.button.button-default.button-outline span,
.button.button-default.button-outline i {
    color: var(--colorDefault60, #bbbbbb);
}

.button.button-default.button-outline:active,
.button.button-default.button-outline.activated {
    background: var(--colorDefault60, #bbbbbb);
}

.button.button-light.button-outline {
    border-color: var(--colorLight60, #bbbbbb);
}

.button.button-light.button-outline span,
.button.button-light.button-outline i {
    color: var(--colorLight60, #bbbbbb);
}

.button.button-light.button-outline:active,
.button.button-light.button-outline.activated {
    background: var(--colorLight60, #bbbbbb);
}

.button.button-stable.button-outline {
    border-color: var(--colorStable60, #b6b6b6);
}

.button.button-stable.button-outline span,
.button.button-stable.button-outline i {
    color: var(--colorStable60, #b6b6b6);
}

.button.button-stable.button-outline:active,
.button.button-stable.button-outline.activated {
    background: var(--colorStable60, #b6b6b6);
}