@import "./style-templetes/body-font";
%sub-container-common{
    float: left;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
    white-space: nowrap;
    &:before { 
        content: ' ';
        display: inline-block;
        vertical-align: middle; 
        height: 100%;
    }
}
%buttons-common{
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    margin-right: 12px;
    vertical-align: middle;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none; 
}
.fg-pagination{
    &-container{
        @extend %body-font;
        background-color: #F6F9FC;
        border: 1px solid #ECEFF5;
        font-size: 0px; // this is to resolve the word spacing issue of two inline divs placed side by side
    }
    &-buttons-container{
        @extend %sub-container-common;
    }
    &-options-container{
        @extend %sub-container-common;
        text-align: center;
    }
    &-record-display-container{
        @extend %sub-container-common;
    }
    &-previous-button{
        @extend %buttons-common;
    }
    &-next-button{
        @extend %buttons-common;
    }
    &-first-page-button{
        @extend %buttons-common;
    }
    &-last-page-button{
        @extend %buttons-common;
    }
    &-page-details{
        @extend %buttons-common;
        text-align: center;
        font-size: 12px;
    }
    &-page-details>input{
        box-sizing: border-box;
        text-align: right;
        padding-right: 2px;
        vertical-align: middle; 
    }
    &-current-page{
        display: inline-block;
        line-height: 15px;
        vertical-align: middle; 
    }
    &-total-page{
        display: inline-block;
        line-height: 15px;
        vertical-align: middle; 
    }
    &-page-size-options{
        @extend %buttons-common;
        margin-right: 10px;
        border-radius: 2px;
        border: 1px solid #EBEFF6;
        box-sizing: border-box;
        background-color: #FFFFFF;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjQwMS45OThweCIgaGVpZ2h0PSI0MDEuOTk4cHgiIHZpZXdCb3g9IjAgMCA0MDEuOTk4IDQwMS45OTgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwMS45OTggNDAxLjk5ODsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGZpbGw9IiM4RThBOEEiIGQ9Ik03My4wOTIsMTY0LjQ1MmgyNTUuODEzYzQuOTQ5LDAsOS4yMzMtMS44MDcsMTIuODQ4LTUuNDI0YzMuNjEzLTMuNjE2LDUuNDI3LTcuODk4LDUuNDI3LTEyLjg0Nw0KCQkJYzAtNC45NDktMS44MTMtOS4yMjktNS40MjctMTIuODVMMjEzLjg0Niw1LjQyNEMyMTAuMjMyLDEuODEyLDIwNS45NTEsMCwyMDAuOTk5LDBzLTkuMjMzLDEuODEyLTEyLjg1LDUuNDI0TDYwLjI0MiwxMzMuMzMxDQoJCQljLTMuNjE3LDMuNjE3LTUuNDI0LDcuOTAxLTUuNDI0LDEyLjg1YzAsNC45NDgsMS44MDcsOS4yMzEsNS40MjQsMTIuODQ3QzYzLjg2MywxNjIuNjQ1LDY4LjE0NCwxNjQuNDUyLDczLjA5MiwxNjQuNDUyeiIvPg0KCQk8cGF0aCBmaWxsPSIjOEU4QThBIiBkPSJNMzI4LjkwNSwyMzcuNTQ5SDczLjA5MmMtNC45NTIsMC05LjIzMywxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MTctNS40MjQsNy44OTgtNS40MjQsMTIuODQ3DQoJCQljMCw0Ljk0OSwxLjgwNyw5LjIzMyw1LjQyNCwxMi44NDhMMTg4LjE0OSwzOTYuNTdjMy42MjEsMy42MTcsNy45MDIsNS40MjgsMTIuODUsNS40MjhzOS4yMzMtMS44MTEsMTIuODQ3LTUuNDI4bDEyNy45MDctMTI3LjkwNg0KCQkJYzMuNjEzLTMuNjE0LDUuNDI3LTcuODk4LDUuNDI3LTEyLjg0OGMwLTQuOTQ4LTEuODEzLTkuMjI5LTUuNDI3LTEyLjg0N0MzMzguMTM5LDIzOS4zNTMsMzMzLjg1NCwyMzcuNTQ5LDMyOC45MDUsMjM3LjU0OXoiLz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==');
        background-repeat: no-repeat, repeat;
        background-position: right .3em top 50%, 0 0;
        background-size: 9px auto, 100%;
        padding: 0em 0em 0em .35em;
    }
    &-options-helper-text{
        @extend %buttons-common;
        text-align: center;
        font-size: 12px;
        max-width: calc(100% - 71px);
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
    }
    &-record-details{
        @extend %buttons-common;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}