.pagination
{
    margin-top: steps(3);
    margin-bottom: steps(3);

    text-align: center;

    @include for-at-least-normal-tablets
    {
        text-align: right;
    }

    ul,
    .actions
    {
        @include for-at-least-normal-tablets
        {
            display: inline-block;
            vertical-align: middle;
        }
    }

    ul
    {
        @include inline-list;

        margin-bottom: steps(2);

        @include for-at-least-normal-tablets
        {
            margin-bottom: 0;
        }

        li
        {
            &:not(:last-child)
            {
                margin-right: steps(1);
            }

            .page
            {
                @include font-dimensions(14px, steps(3), 0.6px);

                display: inline-block;
                min-width: steps(3);
                height: steps(3);
                border-radius: 50%;

                color: $color-text-lighter;
                text-align: center;
            }

            &.active .page
            {
                @include antialiasing;

                color: $color-text-inverted-lighter;
                background: $color-background-inverted-normal;
            }
        }
    }

    .actions a
    {
        display: inline-block;
        width: steps(5);
        height: steps(5);
        border: 1px solid $color-border-darker;
        color: $color-text-normal;

        line-height: steps(5) - 2px;
        text-align: center;

        &:not(:first-child)
        {
            margin-left: steps(2);
        }

        @include for-at-least-normal-tablets
        {
            &:first-child
            {
                margin-left: steps(2);
            }
        }
    }

    @include for-at-least-normal-tablets
    {
        margin-top: steps(4);
        margin-bottom: 0;
    }
}
