@import './default-config.css';
@import 'config.css';

.bold {
    font-weight: bold;
}
.lighColor {
    color: var(--ut-front-react-standardPaginationLightColor);
}

.wrap {
    display: flex;
}

.wrap > div {
    height: 23px;
}

.wrap > div > div {
    line-height: 21px;
}

.pageSwitherWrap {
    z-index: 10;
    overflow: hidden;
    clear: both;
    flex-grow: 1;
}

.pageBoxesWrap {
    text-align: center;
    z-index: 2;
    flex-grow: 10;
}

.pageSizeBoxWrap {
    z-index: 10;
    overflow: hidden;
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
}

/* Specific  */
.pageSwitherWrap .numberInputWrap {
    width: 60px;
    float: left;
}
.numberInput {
    box-shadow: none;
}
.pageSwitherWrap .numberInputWrap .numberInput {
    width: 90%;
    padding: 1% 5%;
    border: 1px solid var(--ut-front-react-standardPaginationBorderColor);
    height: 21px;
}
.pageSwitherWrap .numberInputWrap .numberInput::-webkit-inner-spin-button, 
.pageSwitherWrap .numberInputWrap .numberInput::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.pageSwitherWrap .rightWrap {
    float: left;
}

.pageBoxesWrap .pageBoxesWrapInnerWrap{
    display: inline-block;
}
.pageBoxesWrap .pageBoxesWrapInnerWrap .pageBox {
    min-width: 34px;
    padding: 0px 9px;
    line-height: 20px;
    border: 1px solid var(--ut-front-react-standardPaginationBorderColor);
    border-left: none;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    position: relative;

    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently */
}

:global(html[dir='rtl']) .pageBoxesWrap .pageBoxesWrapInnerWrap .pageBox:last-child {
    border-left: 1px solid var(--ut-front-react-standardPaginationBorderColor);
}
:global(html:not([dir='rtl'])) .pageBoxesWrap .pageBoxesWrapInnerWrap .pageBox:first-child {
    border-left: 1px solid var(--ut-front-react-standardPaginationBorderColor);
}
.pageBoxesWrap .pageBoxesWrapInnerWrap .pageBox:hover {
    background: var(--ut-front-react-standardPaginationBackgroundHoverColor);
}
.pageBoxesWrap .pageBoxesWrapInnerWrap .active {
    background: var(--ut-front-react-standardPaginationBackgroundActiveColor);
    color: var(--ut-front-react-standardPaginationTextActiveColor);
}

.pageBoxesWrap .pageBoxesWrapInnerWrap .active:hover {
    color: var(--ut-front-react-standardPaginationTextHoverColor);
}
.pageBoxesWrap .pageBoxesWrapInnerWrap .pageBox .arrowWrap {
    width: 20px;
    height: 10px;
    position: absolute;
    bottom: 26px;
    background-image: url('./images/arrow-icon.png');
    z-index: 91;
    display: none;
}
.pageBoxesWrap .pageBoxesWrapInnerWrap .pageBox .morePagesWrap {
    position: absolute;
    bottom: 35px;
    left: -61px;
    z-index: 90;
    padding: 1px;
    border: 1px solid var(--ut-front-react-standardPaginationBorderColor);
    background: var(--ut-front-react-standardPaginationPagesWrapColor);
    overflow: hidden;
    display: none;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.pageBoxesWrap .pageBoxesWrapInnerWrap .pageBox .show {
    display: inline !important;
}
.pageBoxesWrap .pageBoxesWrapInnerWrap .pageBox .morePagesWrap .morePageBox {
    min-width: 37px;
    padding: 1px 9px;
    border: 1px solid var(--ut-front-react-standardPaginationBorderColor);
    border-left: none;
    float: left;
    cursor: pointer;
    text-align: center;
    position: relative;
    border-top: none;

    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently */
}
.pageBoxesWrap .pageBoxesWrapInnerWrap .pageBox .morePagesWrap .morePageBox:nth-child(1),
.pageBoxesWrap .pageBoxesWrapInnerWrap .pageBox .morePagesWrap .morePageBox:nth-child(2),
.pageBoxesWrap .pageBoxesWrapInnerWrap .pageBox .morePagesWrap .morePageBox:nth-child(3),
.pageBoxesWrap .pageBoxesWrapInnerWrap .pageBox .morePagesWrap .morePageBox:nth-child(4) {
    border-top: 1px solid var(--ut-front-react-standardPaginationBorderColor);
}
.pageBoxesWrap .pageBoxesWrapInnerWrap .pageBox .morePagesWrap .morePageBox:hover {
    background: var(--ut-front-react-standardPaginationBackgroundHoverColor);
}
.pageBoxesWrap .pageBoxesWrapInnerWrap .pageBox .morePagesWrap .morePageBox:nth-child(1),
.pageBoxesWrap .pageBoxesWrapInnerWrap .pageBox .morePagesWrap .morePageBox:nth-child(5),
.pageBoxesWrap .pageBoxesWrapInnerWrap .pageBox .morePagesWrap .morePageBox:nth-child(9),
.pageBoxesWrap .pageBoxesWrapInnerWrap .pageBox .morePagesWrap .morePageBox:nth-child(13){
    border-left: 1px solid var(--ut-front-react-standardPaginationBorderColor);
}

.pageSizeBoxWrap .totalItemsWrap {
    margin-right: 10px;
}

:global(html[dir='rtl']) .pageSizeBoxWrap .totalItemsWrap {
    margin-right:0px;
    margin-left: 10px;
}

.pageSizeBoxWrap .itemPerPageDDWrap {
    width: 100px;
    margin-right: 5px;
}


:global(html[dir='rtl']) .pageSizeBoxWrap .itemPerPageDDWrap {
    margin-right: 0px;
    margin-left: 5px;
}

@media only screen and (min-device-width: 280px) and (max-device-width: 767px) {
    /* left */
    .pageSwitherWrap {
        display: none;
    }
    /* right */
    .pageSizeBoxWrap {
        display: none;
    }
}