.pagination {
    display: flex;
    justify-content: flex-start;

    &:not(:last-of-type) {
        margin-bottom: .5rem;
    }

    button {
        background-color: $background;
        border: 1px solid white;
        color: $text-color;

        height: 40px;
        width: 120px;
        padding: .5rem;
        flex-grow: 1;
    }

    button:not(.unselectable) {
        cursor: pointer;
    }

    button:not(.unselectable):hover,
    button.active {
        background-color: $background-lighter;
    }

    button:not(:last-child) {
        border-right: none;
    }

    button:first-child {
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }

    button:last-child {
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    }
}