.button {
    --bg-color: var(--primary-accent-color);
    --color: var(--secondary-accent-color);

    isolation: isolate;
    position: relative;
    font-size: large;
    padding: 1em;
    cursor: pointer;
    color: var(--color);
    border: var(--border-width) solid var(--selection-color);
}

.button.reverse-colors {
    --bg-color: var(--secondary-accent-color);
    --color: var(--primary-accent-color);
}

.button:hover,
.button:focus {
    font-weight: bold;
}

.button::before,
.button::after {
    content: "";
    position: absolute;
    z-index: -1;
}

.button::before {
    inset: calc(-1 * var(--border-width));
    background-color: var(--color);
    transform: scale(0, 1);
    transition: transform var(--transition-duration);
}

.button::after {
    inset: 0;
    background-color: var(--bg-color);
}

.button:hover::before,
.button:focus::before {
    transform: none;
}

@media (min-width: 1200px) {
    .button {
        font-size: x-large;
    }
}