/*
- todo
- loading overlay colors
- rich select colors
*/
@import 'nib'
//
.ag-{ag-style}
    // copying bootstrap with line-height, sorts out alignment problems with images beside text
    line-height 1.4
    font-family ag-root-font-family
    font-size ag-root-font-size
    color ag-foreground-1
    // changing the image is same as what bootstrap does, without the images didn't align right
    img
        vertical-align middle
        border 0

    .ag-root
        border ag-border-1

    .ag-cell-data-changed
        background-color ag-value-change-value-highlight-background-color

    .ag-cell-data-changed-animation
        background-color transparent
        transition background-color 1s

    .ag-cell {}
//
    .ag-cell-not-inline-editing
        padding: ag-cell-padding;

    // we do not want to color the range color when the cell is also focused
    .ag-cell-range-selected-1:not(.ag-cell-focus)
        background-color ag-range-selected-color-1

    .ag-cell-range-selected-2:not(.ag-cell-focus)
        background-color ag-range-selected-color-2

    .ag-cell-range-selected-3:not(.ag-cell-focus)
        background-color ag-range-selected-color-3

    .ag-cell-range-selected-4:not(.ag-cell-focus)
        background-color ag-range-selected-color-4

    .ag-cell-focus
        border ag-cell-focused-border

    .ag-cell-no-focus
        border-top ag-cell-no-focus-border-top
        border-bottom ag-cell-no-focus-border-bottom

    .ag-ltr .ag-cell-no-focus
        border-right ag-cell-ltr-no-focus-border-right
        border-left ag-cell-ltr-no-focus-border-left

    .ag-rtl .ag-cell-no-focus
        border-right ag-cell-rtl-no-focus-border-right
        border-left ag-cell-rtl-no-focus-border-left

    // we use rtl and ltr below, even though it's the same style, so it propertly
    .ag-rtl .ag-cell-first-right-pinned
        border-left ag-border-1

    .ag-ltr .ag-cell-first-right-pinned
        border-left ag-border-1

    .ag-rtl .ag-cell-last-left-pinned
        border-right ag-border-1

    .ag-ltr .ag-cell-last-left-pinned
        border-right ag-border-1

    // this needs to be after the other cell items, so the boarder gets preference
    .ag-cell-highlight
        border ag-cell-highlight-border

    .ag-cell-highlight-animation
        transition border 1s

    // used by the animateShowChangedCellRenderer
    .ag-value-change-delta
        padding-right 2px

    .ag-value-change-delta-up
        color ag-value-change-delta-up-color

    .ag-value-change-delta-down
        color ag-value-change-delta-down-color

    .ag-value-change-value
        background-color transparent
        border-radius 1px
        padding-left 1px
        padding-right 1px
        transition background-color 1s

    .ag-value-change-value-highlight
        background-color ag-value-change-value-highlight-background-color
        transition background-color 0.1s

    .ag-rich-select
        font-size 14px
        border ag-border-1
        background-color ag-select-background

    .ag-rich-select-value
        padding 2px

    .ag-rich-select-list
        border-top 1px solid ag-separator-color

    .ag-rich-select-row
        padding 2px

    .ag-rich-select-row-selected
        background-color ag-menu-option-active-color

    .ag-large-text
        border ag-border-1

    .ag-large-textarea {}
//
    // HEADER SECTION
    .ag-header-select-all
        padding ag-header-select-padding
        line-height 0

    .ag-header
        color ag-header-foreground-1
        background ag-header-background-1
        border-bottom ag-border-1
        font-weight ag-header-font-weight

    .ag-header-icon
        color ag-header-foreground-1
        stroke none
        fill ag-header-foreground-1

    .ag-layout-for-print .ag-header-container
        background ag-header-background-1
        border-bottom ag-border-1

    .ag-ltr .ag-header-cell
        border-right ag-border-1

    .ag-rtl .ag-header-cell
        border-left ag-border-1

    .ag-header-cell-moving .ag-header-cell-label
        opacity 0.5

    .ag-header-cell-moving
        background-color rgb(190,190,190)

    .ag-ltr .ag-header-group-cell
        border-right ag-border-1

    .ag-rtl .ag-header-group-cell
        border-left ag-border-1

    .ag-header-group-cell-with-group
        border-bottom ag-border-1

    .ag-header-cell-label
        padding 4px 2px 4px 2px

    .ag-header-cell-text
        padding-left 2px

    .ag-header-group-cell-label
        padding 4px

    .ag-ltr .ag-header-group-cell-label
        padding-left 10px

    .ag-rtl .ag-header-group-cell-label
        padding-right 10px

    .ag-rtl .ag-header-group-text
        margin-left 2px

    .ag-ltr .ag-header-group-text
        margin-right 2px

    .ag-header-cell-menu-button
        padding 2px
        margin-top 4px
        margin-left 1px
        margin-right 1px
        border 1px solid transparent
        border-radius 3px
        box-sizing content-box // When using bootstrap, box-sizing was set to 'border-box'
        line-height 0px // normal line height, a space was appearing below the menu button

    .ag-ltr .ag-pinned-right-header
        border-left ag-border-1

    .ag-rtl .ag-pinned-left-header
        border-right ag-border-1

    .ag-header-cell-menu-button:hover
        border ag-border-1

    .ag-body
        background-color ag-background-1

    .ag-row-odd
        background-color ag-row-odd-background-color

    .ag-row-even
        background-color ag-row-even-background-color

    .ag-row-selected
        background-color ag-row-selected-background-color

    .ag-row-stub
        background-color ag-row-stub-background-color

    .ag-stub-cell
        padding 2px 2px 2px 10px

    .ag-floating-top
        background-color ag-row-floating-background-color

    .ag-floating-top
        .ag-row
            background-color ag-row-floating-background-color
        
    
    .ag-floating-bottom
            background-color ag-row-floating-background-color

    .ag-floating-bottom
        .ag-row
            background-color ag-row-floating-background-color
    

    .ag-overlay-loading-wrapper
        background-color rgba(255, 255, 255, 0.5)

    .ag-overlay-loading-center
        background-color #ffffff
        border ag-border-1
        border-radius 10px
        padding 10px
        color black

    .ag-overlay-no-rows-center
        background-color #ffffff
        border ag-border-1
        border-radius 10px
        padding 10px

    .ag-group-cell-entire-row
        background-color ag-background-1
        padding ag-cell-padding

    .ag-footer-cell-entire-row
        background-color ag-background-1
        padding ag-cell-padding

    .ag-group-cell
        font-style italic

    .ag-ltr .ag-group-expanded
        padding-right 4px

    .ag-rtl .ag-group-expanded
        padding-left 4px

    .ag-ltr .ag-group-contracted
        padding-right 4px

    .ag-rtl .ag-group-contracted
        padding-left 4px

    .ag-ltr .ag-group-loading
        padding-right 4px

    .ag-rtl .ag-group-loading
        padding-left 4px

    .ag-ltr .ag-group-value
        padding-right 2px

    .ag-rtl .ag-group-value
        padding-left 2px

    .ag-ltr .ag-group-checkbox
        padding-right 2px

    .ag-rtl .ag-group-checkbox
        padding-left 2px

    .ag-group-child-count
        display inline-block

    .ag-footer-cell
        font-style italic

    .ag-menu
        border ag-border-color-2
        background-color ag-background-1
        //color ag-foreground-1
        cursor default
        font-family ag-root-font-family
        font-size ag-root-font-size

        .ag-tab-header
            background-color ag-tab-background

        .ag-tab
            padding ag-tab-padding
            margin 2px 2px 0px 2px
            display inline-block
            border-right 1px solid transparent
            border-left 1px solid transparent
            border-top 1px solid transparent
            border-top-right-radius 2px
            border-top-left-radius 2px
            // need to specify color and stroke again here because
            // for blue, the tab header is different to the grid header

        .ag-tab-selected
            background-color ag-tab-selected-background
            border-right ag-tab-border
            border-left ag-tab-border
            border-top ag-tab-border

    .ag-menu-separator
        border-top 1px solid ag-separator-color

    .ag-menu-option {}
//
    .ag-menu-option-active
        background-color ag-menu-option-active-color

    .ag-menu-option-icon
        padding ag-menu-option-padding
        vertical-align middle

    .ag-menu-option-text
        padding ag-menu-option-padding
        vertical-align middle

    .ag-menu-option-shortcut
        padding ag-menu-option-shortcut-padding
        vertical-align middle

    .ag-menu-option-popup-pointer
        padding ag-menu-option-padding
        vertical-align middle

    .ag-menu-option-disabled
        opacity 0.5

    .ag-menu-column-select-wrapper
        margin 2px

    .ag-filter-checkbox
        position relative
        left 2px
        display inline-block
        margin-right 5px

    .ag-filter-header-container
        border-bottom 1px solid ag-separator-color

    .ag-filter-apply-panel
        border-top 1px solid ag-separator-color
        padding 2px

    .ag-filter-value
        margin-left 4px

    .ag-ltr .ag-selection-checkbox
        padding-right 4px

    .ag-rtl .ag-selection-checkbox
        padding-left 4px

    .ag-paging-panel
        padding 4px

    .ag-paging-button
        margin-left 4px
        margin-right 4px

    .ag-paging-row-summary-panel
        display inline-block
        width 300px

    .ag-tool-panel
        background-color ag-background-1
        border-bottom ag-border-1
        border-top ag-border-1
        color ag-foreground-1

    .ltr .ag-tool-panel
        border-right ag-border-1

    .rtl .ag-tool-panel
        border-left ag-border-1

    .ag-status-bar
        color ag-foreground-1
        background-color ag-background-1
        font-size ag-root-font-size
        height 22px
        border-bottom ag-border-1
        border-left ag-border-1
        border-right ag-border-1
        padding 2px

    .ag-status-bar-aggregations
        float right

    .ag-status-bar-item
        padding-left 10px

    .ag-column-drop-cell
        background ag-button-background-1
        color ag-button-foreground-1
        border ag-button-border-1

    .ag-column-drop-cell-ghost
        opacity 0.5

    .ag-column-drop-cell-text
        padding-left 2px
        padding-right 2px

    .ag-column-drop-cell-button
        border 1px solid transparent
        padding-left 2px
        padding-right 2px
        border-radius 3px

    .ag-column-drop-cell-button:hover
        border ag-border-1

    .ag-column-drop-empty-message
        padding-left 2px
        padding-right 2px
        color grey

    .ag-column-drop-icon
        margin 3px

    .ag-column-drop
        background-color ag-background-1

    /* this is for the rowGroupPanel, that appears along the top of the grid */
    .ag-column-drop-horizontal
        padding 2px
        border-top ag-border-1
        border-left ag-border-1
        border-right ag-border-1
        //.ag-column-drop-cell
        //    padding 2px

/* this is for the column drops that appear in the toolPanel */
    .ag-column-drop-vertical
        padding 4px 4px 10px 4px
        border-bottom ag-border-1
        overflow auto

        .ag-column-drop-cell
            margin-top 2px

        .ag-column-drop-empty-message
            text-align center
            padding 5px

    .ag-pivot-mode
        border-bottom ag-border-1
        padding 4px
        background-color ag-background-1

    .ag-tool-panel
        .ag-column-select-panel
            border-bottom ag-border-1
            overflow auto
        

    .ag-select-agg-func-popup
        cursor default
        position absolute
        font-size 14px
        background-color ag-select-background
        border ag-border-1

    .ag-select-agg-func-item
        padding-left 2px
        padding-right 2px

    .ag-select-agg-func-item:hover
        background-color ag-menu-option-active-color