/***********************************************************
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License
 **********************************************************/
@import "themes";

.grid-paging {
    margin-top: 3px;
    clear: both;
    display: inline-block;
    @include themify($themes) {
        border-bottom: 1px solid themed('borderColor');
        box-shadow: 0px 2px 2px themed('boxShadowColor');
    }
    
    width: 100vw;
    span.pages {
        float: left;
        margin: {
            top: 10px;
            right: 5px;
            left: 3px;
        }
    }
    div.page-list {
        float: left;
        margin: {
            top: 0px;
            bottom: 0px;
        }
        padding: {
            left: 10px;
            bottom: 0px;
        }
        div {
            button {
                border: 0;
                @include themify($themes) {
                    color: themed('pagerButtonColor');
                    background-color: themed('pagerColor');
                }
                margin: 0;
                padding: {
                    top: 3px;
                    bottom: 0px;
                    left: 5px;
                    right: 5px;
                }
                height: 28px;
            }
            margin: {
                left: 1px;
                right: 1px;
                bottom: 0;
            };
            padding: 0;
            float: left;
            list-style-type: none;
            cursor: pointer;
            @include themify($themes) {
                border: {
                    left: 1px solid themed('borderColor');
                    top: 1px solid themed('borderColor');
                    right: 1px solid themed('borderColor');
                    bottom: none;
                    top-left-radius: 3px;
                    top-right-radius: 3px;
                };
            } 
            font: {
                size: 18px;
                weight: 100;
            }
        }
        div.selected {
            border-width: 2px;
            @include themify($themes) {
                border-color: themed('selectedBorder');
                box-shadow: 0px 2px 2px themed('boxShadowColor');
                background-color: themed('pagerColorSelected');
                color: themed('pagerTextColor');
            }
            border-color: $selected-border;
            padding: {
                top: 3px;
                bottom: 0px;
                left: 5px;
                right: 5px;
            }
        }
    }
}
