.button-container {
    clear: both;
    margin-top: var(--x4);
}

.button {
    height: var(--x12);
    cursor: pointer;
    line-height: var(--x12);
    text-align: left;
    color: var(--z13);
    border: solid var(--z5) 2px;
    border-radius: var(--x1);
    white-space: nowrap;
    margin: var(--x2) var(--x2) var(--x2) 0;
    padding: 0 var(--x4);
    display: inline-block;
    font-weight: bold;
    background-color: var(--z1);
}

.button:hover {
    background-color: var(--z2);
}

.button.full {
    display: block;
    text-align: center;
}

.button svg {
    vertical-align: center;
    fill: var(--z5);
}

.button:hover svg {
    fill: var(--z10);
}

.button.current {
    background-color: var(--z0);
}

.button.current svg {
    fill: var(--accent15);
}

.button.disabled svg {
    background-color: #aaa;
    cursor: not-allowed;
    fill: var(--z3);
    pointer-events: none;
}