/** Paginator

Example:

    <div class="paginator">
        <button class="paginator__button" title="Previous">
            <span class="cricon cricon--chevron-left" aria-hidden="true"></span>
        </button>
        <span class="paginator__label">Page 3/9</span>
        <button class="paginator__button" title="Next">
            <span class="cricon cricon--chevron-right" aria-hidden="true"></span>
        </button>
    </div>

Example: --inline

    <div class="text-center">
        <span class="paginator paginator--inline">
            <button class="paginator__button" title="Previous">
                <span class="cricon cricon--chevron-left" aria-hidden="true"></span>
            </button>
            <span class="paginator__label">Page 3/9</span>
            <button class="paginator__button" title="Next">
                <span class="cricon cricon--chevron-right" aria-hidden="true"></span>
            </button>
        </span>
    </div>


Example: Disabled button

    <div class="paginator">
        <button class="paginator__button" title="Previous">
            <span class="cricon cricon--chevron-left" aria-hidden="true"></span>
        </button>
        <span class="paginator__label">Page 9/9</span>
        <button class="paginator__button" title="Next" disabled>
            <span class="cricon cricon--chevron-right" aria-hidden="true"></span>
        </button>
    </div>


Example: Small label

    <div class="paginator">
        <button class="paginator__button" title="Previous">
            <span class="cricon cricon--chevron-left" aria-hidden="true"></span>
        </button>
        <span class="paginator__label paginator__label--xsmall">Page 3/9</span>
        <button class="paginator__button" title="Next">
            <span class="cricon cricon--chevron-right" aria-hidden="true"></span>
        </button>
    </div>


Example: Button colors

    <div class="paginator">
        <button class="paginator__button paginator__button--primary" title="Previous">
            <span class="cricon cricon--chevron-left" aria-hidden="true"></span>
        </button>
        <span class="paginator__label">--primary</span>
        <button class="paginator__button paginator__button--primary" title="Next">
            <span class="cricon cricon--chevron-right" aria-hidden="true"></span>
        </button>
    </div>

    <div class="paginator">
        <button class="paginator__button paginator__button--secondary" title="Previous">
            <span class="cricon cricon--chevron-left" aria-hidden="true"></span>
        </button>
        <span class="paginator__label">--secondary</span>
        <button class="paginator__button paginator__button--secondary" title="Next">
            <span class="cricon cricon--chevron-right" aria-hidden="true"></span>
        </button>
    </div>


Styleguide components.paginator
*/
.paginator {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $unit;

    &__label {
        &--xsmall {
            @include font-size(xsmall);
        }
    }

    &__label, &__button {
        margin-left: $unit;
        margin-right: $unit;
        &:last-child {
            margin-right: 0;
        }
        &:first-child {
            margin-left: 0;
        }
    }

    &__button {
        border-radius: 50%;
        width: $unit * 6;
        height: $unit * 6;
        color: $color-light;
        text-align: center;
        background-color: color(neutral);
        &:hover {
            background-color: color(neutral, dark);
        }

        &:disabled {
            &, &:hover {
                background-color: color(neutral);
            }
        }

        &--primary {
            background-color: color(primary);
            &:hover {
                background-color: color(primary, dark);
            }
        }
        &--secondary {
            background-color: color(secondary);
            &:hover {
                background-color: color(secondary, dark);
            }
        }
    }

    &--inline {
        display: inline-flex;
    }
}
