//
// Pager
// --------------------------------------------------

.pager {
    background-color: @brand-primary;
    border-radius: @border-radius-large;
    color: @inverse;
    font-size: 16px;
    font-weight: normal;
    display: inline-block;

    li {
        &:first-child {
            > a,
            > span {
                border-left: none;
                border-radius: @border-radius-large 0 0 @border-radius-large;
            }
        }

        > a,
        > span {
            background: none;
            border: none;
            border-left: 2px solid mix(@brand-primary, black, 85%);
            color: @inverse;
            padding: @pager-padding;
            text-decoration: none;
            white-space: nowrap;
            border-radius: 0 @border-radius-large @border-radius-large 0;
            line-height: 1.313;

            &:hover,
            &:focus {
                background-color: mix(@brand-primary, black, 85%);
            }
            &:active {
                background-color: mix(@brand-primary, black, 85%);
            }

            // Add some spacing between the icon and text
            [class*="fui-"] + span {
                margin-left: 8px;
            }
            span + [class*="fui-"] {
                margin-left: 8px;
            }
        }
    }
}