/*
Hub paging

Theses are styles that drive our paging navigation when viewing records from list views pages.

Markup:
<div style="width: 300px;">
    <div class="hub-paging hub-paging--bottom-margin--angular">
        <div class="hub-paging__item-count-container">
            <span class="hub-paging__item-count">1 of 3 properties</span>
        </div>
        <ul class="hub-paging__btn-group" style="margin: 0; overflow: hidden;">
            <li class="hub-paging__btn hub-paging__btn-previous hub-paging__btn hub-paging__btn-previous--disabled pull-left" style="display: inline-block;">
                <a class="hub-paging__link hub-paging__link--disabled"></a>
            </li>
            <li class="hub-paging__btn hub-paging__btn-back-to-grid pull-left" style="display: inline-block;">
                <a class="hub-paging__link"></a>
            </li>
            <li class="hub-paging__btn hub-paging__btn-next pull-left" style="display: inline-block;">
                <a class="hub-paging__link"></a>
            </li>
        </ul>
        <div style="width:100%;height:20px;float:right;"></div>
        <div class="hub-paging__item-count-container">
            <span class="hub-paging__item-count">1 of 3 very-very-long-word</span>
        </div>
        <ul class="hub-paging__btn-group" style="margin: 0; overflow: hidden;">
            <li class="hub-paging__btn hub-paging__btn-previous hub-paging__btn hub-paging__btn-previous--disabled pull-left" style="display: inline-block;">
                <a class="hub-paging__link hub-paging__link--disabled"></a>
            </li>
            <li class="hub-paging__btn hub-paging__btn-back-to-grid pull-left" style="display: inline-block;">
                <a class="hub-paging__link"></a>
            </li>
            <li class="hub-paging__btn hub-paging__btn-next pull-left" style="display: inline-block;">
                <a class="hub-paging__link"></a>
            </li>
        </ul>
    </div>
</div>

Name: hubPaging

Styleguide 2.6
*/
@hub-paging-width: 126px;

.hub-paging {
    text-align: right;
}

.hub-paging--aspx {
    float: right;
    margin-top: 15px;
    margin-left: 15px;
}

/*this is a temporary margin that is needed to keep the position consistent from angular to aspx until
  we move the hub paging to a better place */
.hub-paging--bottom-margin--angular {
    margin-bottom: 40px;
}

.hub-paging__btn-group {
    float: right;
    height: 40px;
    width: @hub-paging-width;
    padding: 0;
    border: 1px solid @color-hub-paging-border;
    background-color: #FFFFFF;
    border-radius: @border-radius-default;
    box-sizing: border-box;
}

.hub-paging__link {
    float: left;
    display: block;
    width: 100%;
    height: 100%;
}

.hub-paging__link--disabled {
    cursor: default;

    &:hover {
        cursor: default;
    }
}

.hub-paging__item-count-container {
    display: inline-block;
}

.hub-paging__item-count-container--negative-margin-top {
    margin-top: -7px
}

.hub-paging__item-count {
    display: inline-block;
    text-align: center;
    color: @color-hub-paging-item-count;
    font-size: @font-size--12;
    cursor: default;
    line-height: 40px;
    margin-right: 10px;
}

.hub-paging__btn {
    float:left;
    width: 28px;
    height: 40px;
    cursor: pointer;
    box-sizing: border-box;

    &:hover {
        cursor: pointer;
    }
}

.hub-paging__btn-previous {
    .svgicon--icons-chevron-down-grey;
    transform: rotate(450deg);
    background-position: 15px 18px;
    width: 40px;
    margin-left: 0px;
    margin-right: -5px;

    &:hover {
        .svgicon--icons-chevron-down-green;
    }
}

.hub-paging__btn-next {
    .svgicon--icons-chevron-down-grey;
    background-position: 15px 17px;
    transform: rotate(270deg);
    width: 40px;
    margin-left: 0px;
    margin-right: -5px;

    &:hover {
        .svgicon--icons-chevron-down-green;
    }
}

.hub-paging__btn-back-to-grid {
    width: 47px;
    margin-left: 4px;
    border-right: 1px solid @color-hub-paging-border;
    border-left:  1px solid @color-hub-paging-border;
    .svgicon--icons-hamburger-grey;
    background-position: 18px 15px;

    &:hover {
        .svgicon--icons-hamburger-green;

    }
}

.hub-paging__btn-previous--disabled,
.hub-paging__btn-next--disabled {
    cursor: default;
    background-color: rgba(242,242,242,0.5);

    &:hover {
        cursor: default;
        .svgicon--icons-chevron-down-grey;
    }
}


.hub-paging__btn-next--disabled {
    border-bottom-left-radius: @border-radius-default;
    border-bottom-right-radius: @border-radius-default;
}

.hub-paging__btn-previous--disabled {
    border-top-left-radius: @border-radius-default;
    border-top-right-radius: @border-radius-default;
}