ag-grid-community/src/styles/structural/_common-structural.scss

/**
 ****************************
 * Generic Styles
 ****************************
*/
// if we don't do this, then the width and height of the grid would be ignored,
// as there is no default display for the element ag-grid-a2 (as it's not a natural dom element)
ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia  {
    display: block;
}

.ag-hidden {
    display: none !important;
}

.ag-invisible {
    visibility: hidden !important;
}

.ag-drag-handle {
    cursor: grab;
}

.ag-column-drop-wrapper {
    display: flex;
}

.ag-column-drop-horizontal-half-width {
    display: inline-block;
    width: 50% !important;
}

.ag-unselectable {
    @include ag-selectable(none);
}

.ag-selectable {
    @include ag-selectable(text);
}

.ag-tab {
    position: relative;
}

.ag-tab-guard {
    position: absolute;
    width: 0;
    height: 0;
    display: block;
}

.ag-select-agg-func-popup {
    position: absolute;
}

.ag-input-wrapper, .ag-picker-field-wrapper {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    line-height: normal;
    position: relative;
}

// setting shake class to an item will give it a left ot right animation
// used for the 'left' and 'rigth' arrows when dragging columns and scrolling
.ag-shake-left-to-right {
    animation-direction: alternate;
    animation-duration: 0.2s;
    animation-iteration-count: infinite;
    animation-name: ag-shake-left-to-right;
}

@keyframes ag-shake-left-to-right {
    from {
        padding-left: 6px;
        padding-right: 2px;
    }

    to {
        padding-left: 2px;
        padding-right: 6px;
    }
}

.ag-root-wrapper {
    cursor: default;
    position: relative; // set to relative, so absolute popups appear relative to this
    display: flex;
    flex-direction: column;
    overflow: hidden;

    &.ag-layout-normal {
        height: 100%;
    }
}

.ag-watermark {
    position: absolute;
    bottom: 20px;
    right: 25px;
    opacity: 0.5;
    transition: opacity 1s ease-out 3s;
    &::before {
        content: '';
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDIzNSA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij4KICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDAuNjM1NzIzLDAsMCwwLjYzNTcyMywtNDkyLjkyMSwtMzIzLjYwOCkiPgogICAgICAgIDxwYXRoIGQ9Ik0xMDk5LjQsNTQ5LjRMMTA5OS40LDUzNi45TDEwNzguMSw1MzYuOUwxMDY1LjYsNTQ5LjRMMTA5OS40LDU0OS40WiIgc3R5bGU9ImZpbGw6cmdiKDI0LDI5LDMxKTtmaWxsLXJ1bGU6bm9uemVybzsiLz4KICAgICAgICA8cGF0aCBkPSJNMTEyMy40LDUxOC40TDEwOTYuNyw1MTguNEwxMDg0LjEsNTMwLjlMMTEyMy40LDUzMC45TDExMjMuNCw1MTguNFoiIHN0eWxlPSJmaWxsOnJnYigyNCwyOSwzMSk7ZmlsbC1ydWxlOm5vbnplcm87Ii8+CiAgICAgICAgPHBhdGggZD0iTTEwNTMuMiw1NjEuOUwxMDU5LjYsNTU1LjVMMTA4MS4yLDU1NS41TDEwODEuMiw1NjhMMTA1My4yLDU2OEwxMDUzLjIsNTYxLjlaIiBzdHlsZT0iZmlsbDpyZ2IoMjQsMjksMzEpO2ZpbGwtcnVsZTpub256ZXJvOyIvPgogICAgICAgIDxwYXRoIGQ9Ik0xMDU3LjksNTQzLjNMMTA3MS43LDU0My4zTDEwODQuMyw1MzAuOEwxMDU3LjksNTMwLjhMMTA1Ny45LDU0My4zWiIgc3R5bGU9ImZpbGw6cmdiKDI0LDI5LDMxKTtmaWxsLXJ1bGU6bm9uemVybzsiLz4KICAgICAgICA8cGF0aCBkPSJNMTA0Mi44LDU2MS45TDEwNTMuMiw1NjEuOUwxMDY1LjYsNTQ5LjRMMTA0Mi44LDU0OS40TDEwNDIuOCw1NjEuOVoiIHN0eWxlPSJmaWxsOnJnYigyNCwyOSwzMSk7ZmlsbC1ydWxlOm5vbnplcm87Ii8+CiAgICAgICAgPHBhdGggZD0iTTEwOTYuNyw1MTguNEwxMDkwLjMsNTI0LjhMMTA0OS41LDUyNC44TDEwNDkuNSw1MTIuM0wxMDk2LjcsNTEyLjNMMTA5Ni43LDUxOC40WiIgc3R5bGU9ImZpbGw6cmdiKDI0LDI5LDMxKTtmaWxsLXJ1bGU6bm9uemVybzsiLz4KICAgICAgICA8cGF0aCBkPSJNODI4LjYsNTU5LjdMODA5LDU1OS43TDgwNS42LDU2OC4xTDc5Nyw1NjguMUw4MTUuMSw1MjUuN0w4MjIuNiw1MjUuN0w4NDAuNyw1NjguMUw4MzIsNTY4LjFMODI4LjYsNTU5LjdaTTgyNS45LDU1M0w4MTguOCw1MzUuN0w4MTEuNyw1NTNMODI1LjksNTUzWiIgc3R5bGU9ImZpbGw6cmdiKDI0LDI5LDMxKTtmaWxsLXJ1bGU6bm9uemVybzsiLz4KICAgICAgICA8cGF0aCBkPSJNOTYwLjEsNTQxLjNDOTYyLjYsNTM3LjYgOTY4LjksNTM3LjIgOTcxLjUsNTM3LjJMOTcxLjUsNTQ0LjRDOTY4LjMsNTQ0LjQgOTY1LjEsNTQ0LjUgOTYzLjIsNTQ1LjlDOTYxLjMsNTQ3LjMgOTYwLjMsNTQ5LjIgOTYwLjMsNTUxLjVMOTYwLjMsNTY4LjFMOTUyLjUsNTY4LjFMOTUyLjUsNTM3LjJMOTYwLDUzNy4yTDk2MC4xLDU0MS4zWiIgc3R5bGU9ImZpbGw6cmdiKDI0LDI5LDMxKTtmaWxsLXJ1bGU6bm9uemVybzsiLz4KICAgICAgICA8cmVjdCB4PSI5NzUuOCIgeT0iNTM3LjIiIHdpZHRoPSI3LjgiIGhlaWdodD0iMzAuOSIgc3R5bGU9ImZpbGw6cmdiKDI0LDI5LDMxKTsiLz4KICAgICAgICA8cmVjdCB4PSI5NzUuOCIgeT0iNTIzLjQiIHdpZHRoPSI3LjgiIGhlaWdodD0iOS4yIiBzdHlsZT0iZmlsbDpyZ2IoMjQsMjksMzEpOyIvPgogICAgICAgIDxwYXRoIGQ9Ik0xMDIyLjMsNTIzLjRMMTAyMi4zLDU2OC4xTDEwMTQuOCw1NjguMUwxMDE0LjYsNTYzLjRDMTAxMy41LDU2NSAxMDEyLjEsNTY2LjMgMTAxMC40LDU2Ny4zQzEwMDguNyw1NjguMiAxMDA2LjYsNTY4LjcgMTAwNC4yLDU2OC43QzEwMDIuMSw1NjguNyAxMDAwLjEsNTY4LjMgOTk4LjQsNTY3LjZDOTk2LjYsNTY2LjggOTk1LDU2NS44IDk5My43LDU2NC40Qzk5Mi40LDU2MyA5OTEuMyw1NjEuMyA5OTAuNiw1NTkuNEM5ODkuOCw1NTcuNSA5ODkuNSw1NTUuMyA5ODkuNSw1NTIuOUM5ODkuNSw1NTAuNSA5ODkuOSw1NDguMyA5OTAuNiw1NDYuM0M5OTEuNCw1NDQuMyA5OTIuNCw1NDIuNiA5OTMuNyw1NDEuMkM5OTUsNTM5LjggOTk2LjYsNTM4LjcgOTk4LjQsNTM3LjlDMTAwMC4yLDUzNy4xIDEwMDIuMSw1MzYuNyAxMDA0LjIsNTM2LjdDMTAwNi42LDUzNi43IDEwMDguNiw1MzcuMSAxMDEwLjMsNTM4QzEwMTIsNTM4LjkgMTAxMy40LDU0MC4xIDEwMTQuNSw1NDEuOEwxMDE0LjUsNTIzLjVMMTAyMi4zLDUyMy41TDEwMjIuMyw1MjMuNFpNMTAwNS45LDU2MkMxMDA4LjUsNTYyIDEwMTAuNSw1NjEuMSAxMDEyLjEsNTU5LjRDMTAxMy43LDU1Ny43IDEwMTQuNSw1NTUuNCAxMDE0LjUsNTUyLjZDMTAxNC41LDU0OS44IDEwMTMuNyw1NDcuNiAxMDEyLjEsNTQ1LjhDMTAxMC41LDU0NC4xIDEwMDguNSw1NDMuMiAxMDA1LjksNTQzLjJDMTAwMy40LDU0My4yIDEwMDEuMyw1NDQuMSA5OTkuOCw1NDUuOEM5OTguMiw1NDcuNSA5OTcuNCw1NDkuOCA5OTcuNCw1NTIuNkM5OTcuNCw1NTUuNCA5OTguMiw1NTcuNiA5OTkuOCw1NTkuM0MxMDAxLjQsNTYxLjEgMTAwMy40LDU2MiAxMDA1LjksNTYyIiBzdHlsZT0iZmlsbDpyZ2IoMjQsMjksMzEpO2ZpbGwtcnVsZTpub256ZXJvOyIvPgogICAgICAgIDxwYXRoIGQ9Ik04ODUuOCw1NDQuMkw4NjYuNSw1NDQuMkw4NjYuNSw1NTAuOUw4NzcuNSw1NTAuOUM4NzcuMiw1NTQuMyA4NzUuOSw1NTYuOSA4NzMuNyw1NTlDODcxLjUsNTYxIDg2OC43LDU2MiA4NjUuMSw1NjJDODYzLjEsNTYyIDg2MS4yLDU2MS42IDg1OS42LDU2MC45Qzg1Ny45LDU2MC4yIDg1Ni41LDU1OS4yIDg1NS4zLDU1Ny44Qzg1NC4xLDU1Ni41IDg1My4yLDU1NC45IDg1Mi41LDU1M0M4NTEuOCw1NTEuMSA4NTEuNSw1NDkuMSA4NTEuNSw1NDYuOEM4NTEuNSw1NDQuNSA4NTEuOCw1NDIuNSA4NTIuNSw1NDAuNkM4NTMuMSw1MzguNyA4NTQuMSw1MzcuMiA4NTUuMyw1MzUuOEM4NTYuNSw1MzQuNSA4NTcuOSw1MzMuNSA4NTkuNiw1MzIuN0M4NjEuMyw1MzIgODYzLjEsNTMxLjYgODY1LjIsNTMxLjZDODY5LjQsNTMxLjYgODcyLjYsNTMyLjYgODc0LjgsNTM0LjZMODgwLDUyOS40Qzg3Ni4xLDUyNi40IDg3MS4xLDUyNC44IDg2NS4yLDUyNC44Qzg2MS45LDUyNC44IDg1OC45LDUyNS4zIDg1Ni4yLDUyNi40Qzg1My41LDUyNy41IDg1MS4yLDUyOC45IDg0OS4zLDUzMC44Qzg0Ny40LDUzMi43IDg0NS45LDUzNSA4NDQuOSw1MzcuN0M4NDMuOSw1NDAuNCA4NDMuNCw1NDMuNCA4NDMuNCw1NDYuNkM4NDMuNCw1NDkuOCA4NDMuOSw1NTIuOCA4NDUsNTU1LjVDODQ2LjEsNTU4LjIgODQ3LjUsNTYwLjUgODQ5LjQsNTYyLjRDODUxLjMsNTY0LjMgODUzLjYsNTY1LjggODU2LjMsNTY2LjhDODU5LDU2Ny45IDg2Miw1NjguNCA4NjUuMiw1NjguNEM4NjguNCw1NjguNCA4NzEuMyw1NjcuOSA4NzMuOSw1NjYuOEM4NzYuNSw1NjUuNyA4NzguNyw1NjQuMyA4ODAuNSw1NjIuNEM4ODIuMyw1NjAuNSA4ODMuNyw1NTguMiA4ODQuNyw1NTUuNUM4ODUuNyw1NTIuOCA4ODYuMiw1NDkuOCA4ODYuMiw1NDYuNkw4ODYuMiw1NDUuM0M4ODUuOSw1NDUuMSA4ODUuOCw1NDQuNiA4ODUuOCw1NDQuMiIgc3R5bGU9ImZpbGw6cmdiKDI0LDI5LDMxKTtmaWxsLXJ1bGU6bm9uemVybzsiLz4KICAgICAgICA8cGF0aCBkPSJNOTQ2LjgsNTQ0LjJMOTI3LjUsNTQ0LjJMOTI3LjUsNTUwLjlMOTM4LjUsNTUwLjlDOTM4LjIsNTU0LjMgOTM2LjksNTU2LjkgOTM0LjcsNTU5QzkzMi41LDU2MSA5MjkuNyw1NjIgOTI2LjEsNTYyQzkyNC4xLDU2MiA5MjIuMiw1NjEuNiA5MjAuNiw1NjAuOUM5MTguOSw1NjAuMiA5MTcuNSw1NTkuMiA5MTYuMyw1NTcuOEM5MTUuMSw1NTYuNSA5MTQuMiw1NTQuOSA5MTMuNSw1NTNDOTEyLjgsNTUxLjEgOTEyLjUsNTQ5LjEgOTEyLjUsNTQ2LjhDOTEyLjUsNTQ0LjUgOTEyLjgsNTQyLjUgOTEzLjUsNTQwLjZDOTE0LjEsNTM4LjcgOTE1LjEsNTM3LjIgOTE2LjMsNTM1LjhDOTE3LjUsNTM0LjUgOTE4LjksNTMzLjUgOTIwLjYsNTMyLjdDOTIyLjMsNTMyIDkyNC4xLDUzMS42IDkyNi4yLDUzMS42QzkzMC40LDUzMS42IDkzMy42LDUzMi42IDkzNS44LDUzNC42TDk0MSw1MjkuNEM5MzcuMSw1MjYuNCA5MzIuMSw1MjQuOCA5MjYuMiw1MjQuOEM5MjIuOSw1MjQuOCA5MTkuOSw1MjUuMyA5MTcuMiw1MjYuNEM5MTQuNSw1MjcuNSA5MTIuMiw1MjguOSA5MTAuMyw1MzAuOEM5MDguNCw1MzIuNyA5MDYuOSw1MzUgOTA1LjksNTM3LjdDOTA0LjksNTQwLjQgOTA0LjQsNTQzLjQgOTA0LjQsNTQ2LjZDOTA0LjQsNTQ5LjggOTA0LjksNTUyLjggOTA2LDU1NS41QzkwNy4xLDU1OC4yIDkwOC41LDU2MC41IDkxMC40LDU2Mi40QzkxMi4zLDU2NC4zIDkxNC42LDU2NS44IDkxNy4zLDU2Ni44QzkyMCw1NjcuOSA5MjMsNTY4LjQgOTI2LjIsNTY4LjRDOTI5LjQsNTY4LjQgOTMyLjMsNTY3LjkgOTM0LjksNTY2LjhDOTM3LjUsNTY1LjcgOTM5LjcsNTY0LjMgOTQxLjUsNTYyLjRDOTQzLjMsNTYwLjUgOTQ0LjcsNTU4LjIgOTQ1LjcsNTU1LjVDOTQ2LjcsNTUyLjggOTQ3LjIsNTQ5LjggOTQ3LjIsNTQ2LjZMOTQ3LjIsNTQ1LjNDOTQ2LjksNTQ1LjEgOTQ2LjgsNTQ0LjYgOTQ2LjgsNTQ0LjIiIHN0eWxlPSJmaWxsOnJnYigyNCwyOSwzMSk7ZmlsbC1ydWxlOm5vbnplcm87Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=);
        background-repeat: no-repeat;
        background-size: 170px 40px;
        display: block;
        height: 40px;
        width: 170px;
        opacity: 0.5;
    }
}

.ag-watermark-text {
    opacity: 0.5;
    font-weight: bold;
    font-family: Impact, sans-serif;
    font-size: 19px;
    padding-left: 0.7rem;
}

.ag-root-wrapper-body {
    display: flex;
    flex-direction: row;

    &.ag-layout-normal {
        flex: 1 1 auto;
        height: 0;
        min-height: 0;
    }
}

.ag-root {
    position: relative; // set to relative, so absolute popups appear relative to this
    display: flex;
    flex-direction: column;

    &.ag-layout-normal,
    &.ag-layout-auto-height {
        overflow: hidden; // was getting some 'shouldn't be there' scrolls, this sorts it out
        flex: 1 1 auto;
        width: 0;
    }

    &.ag-layout-normal {
        height: 100%;
    }
}

/**
 ****************************
 * Viewports
 ****************************
*/
.ag-header-viewport,
.ag-floating-top-viewport,
.ag-body-viewport,
.ag-center-cols-viewport,
.ag-floating-bottom-viewport,
.ag-body-horizontal-scroll-viewport,
.ag-virtual-list-viewport {
    position: relative;
    height: 100%;
    min-width: 0px;
    overflow: hidden;
    flex: 1 1 auto;
}

.ag-body-viewport {
    display: flex;

    &.ag-layout-normal {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.ag-center-cols-viewport {
    width: 100%;
    overflow-x: auto;
}

.ag-body-horizontal-scroll-viewport {
    overflow-x: scroll;
}

.ag-virtual-list-viewport {
    overflow: auto;
    width: 100%;
}

/**
 ****************************
 * Containers
 ****************************
*/
.ag-header-container,
.ag-floating-top-container,
.ag-body-container,
.ag-pinned-right-cols-container,
.ag-center-cols-container,
.ag-pinned-left-cols-container,
.ag-floating-bottom-container,
.ag-body-horizontal-scroll-container,
.ag-full-width-container,
.ag-floating-bottom-full-width-container,
.ag-virtual-list-container {
    position: relative;
}

// for when auto height is used but there is no row data
.ag-header-container, .ag-floating-top-container, .ag-floating-bottom-container {
    height: 100%;
    white-space: nowrap;
}

.ag-center-cols-container {
    display: block;
}

.ag-pinned-right-cols-container {
    display: block;
}

.ag-body-horizontal-scroll-container {
    height: 100%;
}

.ag-full-width-container,
.ag-floating-top-full-width-container,
.ag-floating-bottom-full-width-container {
    position: absolute;
    top: 0px;
    left: 0px;
    // turn off pointer events, because this container overlays the main row containers.
    // so when user clicks on space between full width rows, we want the mouse clicks to
    // pass onto the underlying container where the real rows are. eg if using full width
    // for row grouping, the groups will be in the full width container, but when user
    // opens a group the children are shown in the other containers - we want to make sure we
    // don't block mouse clicks to those other containers with the children.
    pointer-events: none;
}
.ag-full-width-container {
    width: 100%;
}

.ag-floating-bottom-full-width-container, .ag-floating-top-full-width-container {
    display: inline-block;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.ag-virtual-list-container {
    overflow: hidden;
}

/**
 ****************************
 * Scrollers
 ****************************
*/
.ag-center-cols-clipper {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    min-height: 100%;
    // translate3d is necessary here due to a BUG in Safari
    // where it becomes impossible to click on scrollbars
    // that are only visible during scroll.
    transform: translate3d(0,0,0);
}

.ag-body-horizontal-scroll {
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    position: relative;
    &.ag-scrollbar-invisible {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        pointer-events: none;
        &.ag-scrollbar-scrolling, &.ag-scrollbar-active {
            pointer-events: all;
        }
    }
}

.ag-force-vertical-scroll {
    overflow-y: scroll !important;
}

.ag-horizontal-left-spacer, .ag-horizontal-right-spacer {
    height: 100%;
    min-width: 0;
    overflow-x: scroll;
    &.ag-scroller-corner {
        overflow-x: hidden;
    }
}

/**
 ****************************
 * Headers
 ****************************
*/
.ag-header, .ag-pinned-left-header, .ag-pinned-right-header {
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.ag-header-cell-sortable {
    cursor: pointer;
}

.ag-header {
    display: flex;
    width: 100%;
    white-space: nowrap;
}

.ag-pinned-left-header {
    height: 100%;
}

.ag-pinned-right-header {
    height: 100%;
}

.ag-header-row {
    position: absolute;
    overflow: hidden; // so when floating filters are height 0px, the contents don't spill out
}

.ag-header-cell {
    display: inline-flex;
    align-items: center;
    position: absolute;
    height: 100%;
    overflow: hidden;
}

.ag-header-cell.ag-header-active .ag-header-cell-menu-button {
    opacity: 1;
}

.ag-header-cell-menu-button:not(.ag-header-menu-always-show) {
    transition: opacity 0.2s;
    opacity: 0;
}

.ag-header-group-cell-label, .ag-header-cell-label {
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
    align-items: center;
    text-overflow: ellipsis;
    align-self: stretch;
}

.ag-header-cell-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ag-right-aligned-header .ag-header-cell-label {
    flex-direction: row-reverse;
}

.ag-header-group-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ag-header-cell-resize {
    position: absolute;
    z-index: 2;
    height: 100%;
    width: 8px;
    top: 0;

    cursor: ew-resize;

    // unpinned headers get their rezise handle on the right in normal mode and left in RTL mode
    @include ag-unthemed-rtl((
        right: -4px
    ));
}

.ag-pinned-left-header .ag-header-cell-resize {
    right: -4px; // pinned left headers always have their resize on the right, even in RTL mode
}

.ag-pinned-right-header .ag-header-cell-resize {
    left: -4px; // pinned right headers always have their resize on the left, even in RTL mode
}

.ag-header-select-all {
    display: flex;
}

/**
 ****************************
 * Columns
 ****************************
*/
.ag-column-moving {
    .ag-cell {
        transition: left 0.2s;
    }

    .ag-header-cell {
        transition: left 0.2s;
    }

    .ag-header-group-cell {
        transition: left 0.2s, width 0.2s;
    }
}

/**
 ****************************
 * Column Panel
 ****************************
*/

.ag-column-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1 1 auto;
}

.ag-column-select {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 3 1 0px;
}

.ag-column-select-header {
    position: relative;
    display: flex;
    flex: none;
}

.ag-column-select-header-icon {
    position: relative;
}

.ag-column-select-header-filter-wrapper {
    flex: 1 1 auto;
}

.ag-column-select-header-filter {
    width: 100%;
}

.ag-column-select-list {
    flex: 1 1 0px;
    overflow: hidden;
}

.ag-column-drop {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: auto;
    width: 100%;
}

.ag-column-drop-list {
    display: flex;
    align-items: center;
}

.ag-column-drop-cell {
    position: relative;
    display: flex;
    align-items: center;
}

.ag-column-drop-cell-text {
    overflow: hidden;
    flex: 1 1 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ag-column-drop-vertical {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-items: stretch;
    flex: 1 1 0px;
}

.ag-column-drop-vertical-title-bar {
    display: flex;
    align-items: center;
    flex: none;
}

.ag-column-drop-vertical-list {
    position: relative;
    align-items: stretch;
    flex-grow: 1;
    flex-direction: column;
    overflow-x: auto;

    > * {
        flex: none;
    }
}

.ag-column-drop-empty .ag-column-drop-vertical-list {
    overflow: hidden;
}

.ag-column-drop-vertical-empty-message {
    display: block;
}

.ag-column-drop.ag-column-drop-horizontal {
    white-space: nowrap;
    overflow: hidden;
}

.ag-column-drop-cell-button {
    cursor: pointer;
}

.ag-filter-toolpanel {
    flex: 1 1 0px;
    min-width: 0;
}

.ag-filter-toolpanel-header {
    position: relative;
}

.ag-filter-toolpanel-header, .ag-filter-toolpanel-search {
    display: flex;
    align-items: center;

    > * {
        display: flex;
        align-items: center;
    }
}

.ag-filter-apply-panel {
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
}

/**
 ****************************
 * Rows
 ****************************
*/
// for row animations. 
.ag-row-animation .ag-row {
    transition: transform 0.4s, top 0.4s, background-color 0.1s, opacity 0.2s;
}
// for rows older than one second, we also animate the height. we don't include the height
// initially so we are not animating auto-height rows on initial render.
.ag-row-animation .ag-row.ag-after-created {
    transition: transform 0.4s, top 0.4s, height 0.4s, background-color 0.1s, opacity 0.2s;
}

.ag-row-no-animation .ag-row {
    transition: background-color 0.1s;
}

.ag-row {
    white-space: nowrap;
    width: 100%;
}

.ag-row-loading {
    display: flex;
    align-items: center;
}

.ag-row-position-absolute {
    position: absolute;
}

.ag-row-position-relative {
    position: relative;
}

.ag-full-width-row {
    overflow: hidden;
    // turn events back on, as we removed them in the parent
    pointer-events: all;
}

.ag-row-inline-editing {
    z-index: 1;
}

.ag-row-dragging {
    z-index: 2;
}

.ag-stub-cell {
    display: flex;
    align-items: center;
}

/**
 ****************************
 * Cells
 ****************************
*/
.ag-cell {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    height: 100%;
}

// This is used when using a Cell Wrapper (eg row drag, selection, or auto-height).
// If not using wrapper, ag-cell-value is on a div, which is 100% width. However when
// in a wrapper, it's a span (not a div), so we need 100% width to provide consistent
// behaviour regardless of wrapper used or not. If we did not do this, Cell Renderer's
// with 100% width wouldn't get the full width when using a wrapper.
// Instead of just 100% width we use flex, as it's not the only item on the line, so it
// fills the remaining space.
.ag-cell-value {
    flex: 1 1 auto;
}

.ag-cell-value, .ag-group-value {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ag-cell-wrap-text {
    white-space: normal;
    word-break: break-all;
}

.ag-cell-wrapper {
    display: flex;
    align-items: center;
    // adding overflow: hidden breaks the checkbox focus outline
    // overflow: hidden;
    // adding width: 100% here breaks text-overflow: ellipsis
    // width: 100%;
    &.ag-row-group {
        align-items: flex-start;
    }
}

.ag-sparkline-wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.ag-full-width-row .ag-cell-wrapper.ag-row-group {
    height: 100%;
    align-items: center;
}

.ag-cell-inline-editing {
    z-index: 1;

    .ag-cell-wrapper,
    .ag-cell-edit-wrapper,
    .ag-cell-editor,
    .ag-cell-editor .ag-wrapper,
    .ag-cell-editor input {
        height: 100%;
        width: 100%;
        line-height: normal;
    }
}

.ag-cell .ag-icon {
    display: inline-block;
    vertical-align: middle;
}

/**
 ****************************
 * Filters
 ****************************
*/
.ag-set-filter-item {
    display: flex;
    align-items: center;
    height: 100%;
}

.ag-set-filter-item-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ag-set-filter-item-checkbox {
    display: flex;
}

.ag-filter-body-wrapper {
    display: flex;
    flex-direction: column;
}

.ag-filter-filter {
    flex: 1 1 0px;
}

.ag-filter-condition {
    display: flex;
    justify-content: center;
}

/**
 ****************************
 * Floating Filter
 ****************************
*/

.ag-floating-filter-body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    height: 100%;
}

.ag-floating-filter-full-body {
    display: flex;
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
    align-items: center;
    overflow: hidden;
}

.ag-floating-filter-full-body > div {
    flex: 1 1 auto;
}

.ag-floating-filter-input {
    align-items: center;
    display: flex;
    width: 100%;

    > * {
        flex: 1 1 auto;
    }
}

.ag-floating-filter-button {
    display: flex;
    flex: none;
}

/**
 ****************************
 * Drag & Drop
 ****************************
*/

.ag-dnd-ghost {
    position: absolute;
    display: inline-flex;
    align-items: center;
    cursor: move;
    white-space: nowrap;
    z-index: 9999;
}

/**
 ****************************
 * Overlay
 ****************************
*/
.ag-overlay {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
}

.ag-overlay-panel {
    display: flex;
    height: 100%;
    width: 100%;
}

.ag-overlay-wrapper {
    display: flex;
    flex: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ag-overlay-loading-wrapper {
    // prevent interaction with grid while it's loading
    pointer-events: all;
}

/**
 ****************************
 * Popup
 ****************************
*/

.ag-popup-child {
    z-index: 5;
    top: 0;
}

.ag-popup-editor {
    position: absolute;
    user-select: none;
    z-index: 1;
}

.ag-large-text-input {
    display: block;
}

/**
 ****************************
 * Virtual Lists
 ****************************
*/
.ag-virtual-list-item {
    position: absolute;
    width: 100%;
}

/**
 ****************************
 * Floating Top and Bottom
 ****************************
*/
.ag-floating-top {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
    display: flex;
}

.ag-pinned-left-floating-top {
    display: inline-block;
    overflow: hidden;
    position: relative;
    min-width: 0px;
}

.ag-pinned-right-floating-top {
    display: inline-block;
    overflow: hidden;
    position: relative;
    min-width: 0px;
}

.ag-floating-bottom {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
    display: flex;
}

.ag-pinned-left-floating-bottom {
    display: inline-block;
    overflow: hidden;
    position: relative;
    min-width: 0px;
}

.ag-pinned-right-floating-bottom {
    display: inline-block;
    overflow: hidden;
    position: relative;
    min-width: 0px;
}


/**
 ****************************
 * Dialog
 ****************************
*/

.ag-dialog, .ag-panel {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.ag-panel-title-bar {
    display: flex;
    flex: none;
    align-items: center;
    cursor: default;
}

.ag-panel-title-bar-title {
    flex: 1 1 auto;
}

.ag-panel-title-bar-buttons {
    display: flex;
}

.ag-panel-title-bar-button {
    cursor: pointer;
}

.ag-panel-content-wrapper {
    display: flex;
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
}

.ag-dialog {
    position: absolute;
}

.ag-resizer {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    &.ag-resizer-topLeft {
        top: 0;
        left: 0;
        height: 5px;
        width: 5px;
        cursor: nwse-resize;
    }
    &.ag-resizer-top {
        top: 0;
        left: 5px;
        right: 5px;
        height: 5px;
        cursor: ns-resize;
    }
    &.ag-resizer-topRight {
        top: 0;
        right: 0;
        height: 5px;
        width: 5px;
        cursor: nesw-resize;
    }
    &.ag-resizer-right {
        top: 5px;
        right: 0;
        bottom: 5px;
        width: 5px;
        cursor: ew-resize;
    }
    &.ag-resizer-bottomRight {
        bottom: 0;
        right: 0;
        height: 5px;
        width: 5px;
        cursor: nwse-resize;
    }
    &.ag-resizer-bottom {
        bottom: 0;
        left: 5px;
        right: 5px;
        height: 5px;
        cursor: ns-resize;
    }
    &.ag-resizer-bottomLeft {
        bottom: 0;
        left: 0;
        height: 5px;
        width: 5px;
        cursor: nesw-resize;
    }
    &.ag-resizer-left {
        left: 0;
        top: 5px;
        bottom: 5px;
        width: 5px;
        cursor: ew-resize;
    }
}

/**
 ****************************
 * Tooltip
 ****************************
*/

.ag-tooltip {
    position: absolute;
    pointer-events: none;
    z-index: 99999;
}

.ag-tooltip-custom {
    position: absolute;
    pointer-events: none;
    z-index: 99999;
}

/**
 ****************************
 * Animations
 ****************************
*/

// this is used by the animateShowChangeCellRenderer. it is arguable that this belongs in the themes,
// however it is not tied to color, only placement and visiblity, which is behaviour and not style,
// thus belongs here, besides it doesn't change wih the themes
.ag-value-slide-out {
    margin-right: 5px;
    opacity: 1;
    transition: opacity 3s, margin-right 3s; // as value fades, it also moves to the left via the margin setting
    transition-timing-function: linear;
}

.ag-value-slide-out-end {
    margin-right: 10px;
    opacity: 0;
}

.ag-opacity-zero {
    opacity: 0 !important;
}

/**
 ****************************
 * Menu
 ****************************
*/
.ag-menu {
    max-height: 100%;
    overflow-y: auto;
    position: absolute;
    user-select: none;
}

.ag-menu-column-select-wrapper {
    height: 265px;
    overflow: auto;

    .ag-column-select {
        height: 100%;
    }
}

.ag-menu-list {
    display: table;
    width: 100%;
}

.ag-menu-option, .ag-menu-separator {
    display: table-row;
}

.ag-menu-option-part, .ag-menu-separator-part {
    display: table-cell;
    vertical-align: middle;
}

.ag-menu-option-text {
    white-space: nowrap;
}

.ag-compact-menu-option {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
}

.ag-compact-menu-option-text {
    white-space: nowrap;
    flex: 1 1 auto;
}

/**
 ****************************
 * Rich Select
 ****************************
*/
.ag-rich-select {
    cursor: default;
    outline: none;
}

.ag-rich-select-value {
    display: flex;
    align-items: center;
}

.ag-rich-select-value-icon {
    flex: 1 1 auto;
    order: 1;
    @include ag-unthemed-rtl(( text-align: right ));
}


.ag-rich-select-list {
    position: relative;
}

.ag-rich-select-virtual-list-item {
    display: flex;
}

.ag-rich-select-row {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    white-space: nowrap;
}

/**
 ****************************
 * Pagination
 ****************************
*/
.ag-paging-panel {
    align-items: center;
    display: flex;
    justify-content: flex-end;
}

.ag-paging-page-summary-panel {
    display: flex;
    align-items: center;
}

.ag-paging-button {
    position: relative;
}

.ag-disabled .ag-paging-page-summary-panel {
    pointer-events: none;
}

/**
 ****************************
 * Tool Panel
 ****************************
*/
.ag-tool-panel-wrapper {
    display: flex;
    overflow-y: auto;
    overflow-x: hidden;
    cursor: default;
    user-select: none;
}

.ag-column-select-column,
.ag-column-select-column-group,
.ag-select-agg-func-item {
    position: relative;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 100%;
    > * {
        flex: none;
    }
}

.ag-column-select-checkbox {
    display: flex;
}

.ag-tool-panel-horizontal-resize {
    cursor: ew-resize;
    height: 100%;
    position: absolute;
    top: 0;
    width: 5px;
    z-index: 1;
}

.ag-side-bar-left .ag-tool-panel-horizontal-resize {
    @include ag-unthemed-rtl(( right: -3px ));
}

.ag-side-bar-right .ag-tool-panel-horizontal-resize {
    @include ag-unthemed-rtl(( left: -3px ));
}

.ag-details-row {
    width: 100%;
}

.ag-details-row-fixed-height {
    height: 100%;
}

.ag-details-grid {
    width: 100%;
}

.ag-details-grid-fixed-height {
    height: 100%;
}

.ag-header-group-cell {
    display: flex;
    align-items: center;
    height: 100%;
    position: absolute;
}

.ag-cell-label-container {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.ag-right-aligned-header .ag-cell-label-container {
    flex-direction: row;
}

/**
 ****************************
 * Side Bar
 ****************************
*/
.ag-side-bar {
    display: flex;
    flex-direction: row-reverse;
}

.ag-side-bar-left {
    order: -1;
    flex-direction: row;
}

.ag-side-button-button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    outline: none;
    cursor: pointer;
}

.ag-side-button-label {
    writing-mode: vertical-lr;
}

/**
 ****************************
 * Status Bar
 ****************************
*/
.ag-status-bar {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}

.ag-status-panel {
    display: inline-flex;
}

.ag-status-name-value {
    white-space: nowrap;
}

.ag-status-bar-left {
    display: inline-flex;
}

.ag-status-bar-center {
    display: inline-flex;
}

.ag-status-bar-right {
    display: inline-flex;
}

/**
 ****************************
 * Widgets
 ****************************
*/


.ag-icon {
    display: block;
    speak: none;
}

.ag-group {
    position: relative;
    width: 100%;
}

.ag-group-title-bar {
    display: flex;
    align-items: center;
}

.ag-group-title {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ag-group-title-bar
.ag-group-title {
    cursor: default;
}

.ag-group-toolbar {
    display: flex;
    align-items: center;
}

.ag-group-container {
    display: flex;
}

.ag-disabled .ag-group-container {
    pointer-events: none;
}

.ag-group-container-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}

.ag-group-container-vertical {
    flex-direction: column;
}

.ag-column-group-icons {
    display: block;
    > * {
        cursor: pointer;
    }
}

.ag-group-item-alignment-stretch .ag-group-item {
    align-items: stretch;
}

.ag-group-item-alignment-start .ag-group-item {
    align-items: flex-start;
}

.ag-group-item-alignment-end .ag-group-item {
    align-items: flex-end;
}

.ag-toggle-button-icon {
    transition: right 0.3s;
    position: absolute;
    top: -1px;
}

.ag-input-field, .ag-select {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.ag-input-field-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.ag-floating-filter-input .ag-input-field-input[type='date'] {
    // Fix a bug in Blink rendering engine where date input will not shrink from its default size in a
    // flex container, but it will grow. So we give it a very small width and it will grow to the right size
    width: 1px;
}

.ag-range-field {
    display: flex;
    align-items: center;
}

.ag-angle-select {
    display: flex;
    align-items: center;
}

.ag-angle-select-wrapper {
    display: flex;
}

.ag-angle-select-parent-circle {
    display: block;
    position: relative;
}
.ag-angle-select-child-circle {
    position: absolute;
}

.ag-slider-wrapper {
    display: flex;
    .ag-input-field {
        flex: 1 1 auto;
    }
}

.ag-picker-field-display {
    flex: 1 1 auto;
}

.ag-picker-field {
    display: flex;
    align-items: center;
}

.ag-picker-field-icon {
    display: flex;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.ag-picker-field-wrapper {
    overflow: hidden;
}

.ag-label-align-right {
    .ag-label {
        order: 1;
    }
    > * {
        flex: none;
    }
}

.ag-label-align-top {
    flex-direction: column;
    align-items: flex-start;
    > * {
        align-self: stretch;
    }
}

.ag-color-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.ag-spectrum-color {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    cursor: default;
}

.ag-spectrum-fill {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.ag-spectrum-val {
    cursor: pointer;
}

.ag-spectrum-dragger {
    position: absolute;
    pointer-events: none;
    cursor: pointer;
}

.ag-spectrum-hue {
    cursor: default;
    background: linear-gradient(to left,
        #ff0000 3%, #ffff00 17%,
        #00ff00 33%, #00ffff 50%,
        #0000ff 67%, #ff00ff 83%,
        #ff0000 100%
    );
}

.ag-spectrum-alpha {
    cursor: default;
}

.ag-spectrum-hue-background {
    width: 100%;
    height: 100%;
}

.ag-spectrum-alpha-background {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(0, 0, 0));
    width: 100%;
    height: 100%;
}

.ag-spectrum-tool {
    cursor: pointer;
}

.ag-spectrum-slider {
    position: absolute;
    pointer-events: none;
}

.ag-recent-colors {
    display: flex;
}

.ag-recent-color {
    cursor: pointer;
}

// Default values for themes that do not use the mixins
@for $i from 1 to 100 {
    .ag-column-select-indent-#{$i} {
        @include ag-unthemed-rtl(( padding-left: $i * 20px ));
    }

    .ag-row-group-indent-#{$i} {
        @include ag-unthemed-rtl(( padding-left: $i * 20px ));
    }
}

.ag-ltr {
    direction: ltr;
    .ag-body, .ag-floating-top, .ag-floating-bottom, .ag-header, .ag-body-viewport, .ag-body-horizontal-scroll {
        flex-direction: row;
    }
}

.ag-rtl {
    direction: rtl;
    .ag-body, .ag-floating-top, .ag-floating-bottom, .ag-header, .ag-body-viewport, .ag-body-horizontal-scroll {
        flex-direction: row-reverse;
    }

    .ag-icon-contracted,
    .ag-icon-tree-closed {
        display: block;
        transform: rotate(180deg);
    }
}