.button {
    color: var(--color-base);
    cursor: pointer;
    border: 0;
    display: block;
    padding: 12px;
    transition: all 0.1s ease-out;
    background-color: var(--color-grey-800);
    border: 1px solid var(--color-grey-800);

    font-weight: bold;
    font-size: var(--size-14);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    outline-color: var(--color-outline);
    outline-offset: 0ch;

    box-shadow: var(--shadow-sm);
    border-radius: var(--rounded);
}
.button:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--color-grey-700);
    background-color: var(--color-grey-700);
}
.button:active {
    box-shadow: var(--shadow-sm);
    border-color: var(--color-grey-800);
    background-color: var(--color-grey-800);
}

.buttons {
    border: 1px solid var(--color-border);
    display: flex;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border-color: var(--color-grey-800);
    border-radius: var(--rounded);
    background-color: var(--color-grey-800);
}
.buttons > .button {
    box-shadow: none;
    border: none;
    border-radius: 0;
}
.buttons > .button:last-of-type {
    border-right: none;
}
.buttons > .button:hover {
    z-index: 2;
    box-shadow: var(--shadow-lg);
}
.buttons > .button:focus {
    z-index: 3;
}
.buttons.pagination > .button.small {
    padding: 10px 14px !important;
}

/* Properties */
.button.fluid {
    width: 100%;
}
.button.small {
    padding: 10px 10px 10px;
    font-size: var(--size-12);
}

/* White Button */
.button.white,
.buttons.white > .button {
    color: var(--color-grey-500);
    border-color: var(--color-grey-100);
    background-color: var(--color-white);
}
.button.white:hover,
.buttons.white > .button:hover {
    color: var(--color-grey-300);
}
.button.white:active,
.buttons.white > .button:active {
    background-color: var(--color-base);
}
.buttons.white {
    border-color: var(--color-grey-100);
    background-color: var(--color-white);
}
.buttons.white > .button {
    border-right: 1px solid var(--color-grey-100);
}
.buttons.white > .button:last-of-type {
    border-right: none;
}

/* Green Button */
.button.green,
.buttons.green > .button {
    color: var(--color-white);
    border-color: var(--color-green);
    background-color: var(--color-green);
}
.button.green:hover,
.buttons.green > .button:hover {
    filter: brightness(1.1);
}
.button.green:active,
.buttons.green > .button:active {
    filter: brightness(0.9);
    transition: none;
}
.buttons.green {
    border-color: var(--color-green);
    background-color: var(--color-green);
}
.buttons.green > .button {
    border-right: 1px solid var(--color-green);
}
.buttons.green > .button:last-of-type {
    border-right: none;
}