// Customize the look and feel of the grid with Sass variables
// Up-to-date list of variables is available here: http://www.ag-grid.com/javascript-grid-styling/#customizing-sass-variables
//https://github.com/ag-grid/ag-grid-customise-theme
//https://www.ag-grid.com/javascript-grid-themes-provided/
// changes the selected checkbox check mark color

@import "../../theme/green-theme.less";


$ag-header-background-color: #1890ff;
$ag-font-family: iranyekan, sans-serif;
$ag-icon-color: #fff;


@import '../../../node_modules/ag-grid-community/dist/styles/ag-grid.css';
@import '../../../node_modules/ag-grid-community/dist/styles/ag-theme-blue/sass/ag-theme-blue';
//

.ag-theme-blue {
  .ag-tab-header {
    background-color: #1da57a;
  }

  .ag-tab-header {
    .ag-tab.ag-tab-selected {
      background-color: #1da57a;
      border: none;
    }
  }

}


//.ag-theme-balham {
//    @include ag-theme-balham((
//        // Colour of text and icons in primary UI elements like menus
//            foreground-color: #000,
//
//        // Colour of text in grid cells
//            data-color:  #000,
//
//        // Colour of text and icons in UI elements that need to be slightly less emphasised to avoid distracting attention from data
//            secondary-foreground-color:  #000,
//
//        // Colour of text and icons in the header
//            header-foreground-color:  #000,
//
//        // Color of elements that can't be interacted with because they are in a disabled state
//            disabled-foreground-color: ag-derived(foreground-color, $opacity: 0.5),
//
//        // Background colour of the grid
//            background-color: #fff,
//
//        // Background colour for all headers, including the grid header, panels etc
//            header-background-color: null,
//
//        // Background colour for second level headings within UI components
//            subheader-background-color: null,
//
//        // Background for areas of the interface that contain UI controls, like tool panels and the chart settings menu
//            control-panel-background-color: null,
//
//        // Background color of selected rows in the grid and in dropdown menus
//            selected-row-background-color: ag-derived(background-color, $mix: foreground-color 25%),
//
//        // Background colour applied to every other row or null to use background-color for all rows
//            odd-row-background-color: null,
//
//        // Background color when hovering over rows in the grid and in dropdown menus, or null for no rollover effect (note - if you want a rollover on one but not the other, set to null and use CSS to achieve the rollover)
//            row-hover-color: null,
//
//        // Color to draw around selected cell ranges
//            range-selection-border-color: ag-derived(foreground-color),
//
//        // Background colour of selected cell ranges. Choosing a semi-transparent color (opacity of 0.1 to 0.5 works well) will ensure that it looks good when multiple ranges overlap.
//            range-selection-background-color: ag-derived(range-selection-border-color, $opacity: 0.2),
//
//        // Background colour to apply to a cell range when it is copied from or pasted into
//            range-selection-highlight-color: ag-derived(range-selection-border-color),
//
//        // Colour and thickness of the border drawn under selected tabs, including menus and tool panels
//            selected-tab-underline-color: ag-derived(range-selection-border-color),
//            selected-tab-underline-width: 0,
//            selected-tab-underline-transition-speed: null,
//
//        // Background colour for cells that provide categories to the current range chart
//            range-selection-chart-category-background-color: rgba(#00FF84, 0.1),
//
//        // Background colour for cells that provide data to the current range chart
//            range-selection-chart-background-color: rgba(#0058FF, 0.1),
//
//        // Rollover colour for header cells
//            header-cell-hover-background-color: null,
//
//        // Colour applied to header cells when the column is being dragged to a new position
//            header-cell-moving-background-color: ag-derived(header-cell-hover-background-color),
//
//        // Colour to apply when a cell value changes and enableCellChangeFlash is enabled
//            value-change-value-highlight-background-color: rgba(#16A085, 0.5),
//
//        // Colours to apply when a value increases or decreases in an agAnimateShowChangeCellRenderer cell
//            value-change-delta-up-color: #43a047,
//            value-change-delta-down-color: #e53935,
//
//        // Colour for the "chip" that repersents a column that has been dragged onto a drop zone
//            chip-background-color: null,
//
//        //
//        // BORDERS
//        //
//
//        // Draw borders around most UI elements
//            borders: true,
//
//        // Draw the few borders that are critical to UX, e.g. between headers and rows.
//            borders-critical: ag-derived(borders),
//
//        // Draw decorative borders separating UI elements within components
//            borders-secondary: ag-derived(borders),
//
//        // Draw borders around sidebar tabs so that the active tab appears connected to the current tool panel
//            borders-side-button: ag-derived(borders),
//
//            border-radius: 0px,
//
//        // Colour for border around major UI components like the grid itself, headers, footers and tool panels
//            border-color: ag-derived(background-color, $mix: foreground-color 25%),
//
//        // Colour for borders used to separate elements within a major UI component
//            secondary-border-color: ag-derived(border-color),
//
//        // Colour of the border between grid rows, or null to display no border
//            row-border-color: ag-derived(secondary-border-color),
//
//        // Default border for cells. This can be used to specify the border-style and border-color properties e.g. `dashed red` but the border-width is fixed at 1px.
//            cell-horizontal-border: solid transparent,
//
//        // Separator between columns in the header. Displays between all header cells For best UX, use either this or header-column-resize-handle but not both
//            header-column-separator: false,
//            header-column-separator-height: 100%,
//            header-column-separator-width: 1px,
//            header-column-separator-color: ag-derived(border-color, $opacity: 0.5),
//
//        // Visible marker for resizeable columns. Displays in the same position as the column separator, but only when the column is resizeable. For best UX, use either this or header-column-separator but not both
//            header-column-resize-handle: false,
//            header-column-resize-handle-height: 50%,
//            header-column-resize-handle-width: 1px,
//            header-column-resize-handle-color: ag-derived(border-color, $opacity: 0.5),
//
//        //
//        // INPUTS
//        //
//
//        // Suppress styling of native widgets: . If you want to style these yourself, set this to true. If you only want to disable styling for some kinds of input, you can set this to true and e.g. @include ag-native-inputs((checkbox: false)) which will emit styles for all kinds of input except checkboxes.
//            suppress-native-widget-styling: false,
//
//            input-disabled-background-color: null,
//            input-border-color: null,
//
//            checkbox-background-color: null,
//            checkbox-border-radius: ag-derived(border-radius),
//            checkbox-checked-color: ag-derived(foreground-color),
//            checkbox-unchecked-color: ag-derived(foreground-color),
//            checkbox-indeterminate-color: ag-derived(checkbox-unchecked-color),
//
//            toggle-button-off-border-color: ag-derived(checkbox-unchecked-color),
//            toggle-button-off-background-color: ag-derived(checkbox-unchecked-color),
//            toggle-button-on-border-color: ag-derived(checkbox-checked-color),
//            toggle-button-on-background-color: ag-derived(checkbox-checked-color),
//            toggle-button-switch-background-color: ag-derived(background-color),
//            toggle-button-switch-border-color: ag-derived(toggle-button-off-border-color),
//            toggle-button-border-width: 1px,
//            toggle-button-height: ag-derived(icon-size),
//            toggle-button-width: ag-derived(toggle-button-height, $times: 2),
//
//            input-focus-box-shadow: null,
//            input-focus-border-color: null,
//
//        // CHART SETTINGS
//
//        // Color of border around selected chart style
//            minichart-selected-chart-color: ag-derived(checkbox-checked-color),
//        // Color of dot representing selected page of chart styles
//            minichart-selected-page-color: ag-derived(checkbox-checked-color),
//
//
//        //
//        // SIZING / PADDING / SPACING
//        //
//
//        // grid-size is the main control for affecting how tightly data and UI elements are packed together. All padding and spacing in the grid is defined as a multiple of grid-size, so increasing it will make most components larger by increasing their internal white space while leaving the size of text and icons unchanged.
//            grid-size: 4px,
//
//        // The size of square icons and icon-buttons
//            icon-size: 12px,
//
//        // These 4 variables set the padding around and spacing between widgets in "widget containers" which are parts of the UI that contain many related widgets, like the set filter menu, charts settings tabs etc.
//            widget-container-horizontal-padding: ag-derived(grid-size, $times: 1.5),
//            widget-container-vertical-padding: ag-derived(grid-size, $times: 1.5),
//            widget-horizontal-spacing: ag-derived(grid-size, $times: 1.5),
//            widget-vertical-spacing: ag-derived(grid-size),
//
//        // Horizontal padding for grid and header cells (vertical padding is not set explicitly, but inferred from row-height / header-height
//            cell-horizontal-padding: ag-derived(grid-size, $times: 3),
//
//        // Horizontal spacing between widgets inside cells (e.g. row group expand buttons and row selection checkboxes)
//            cell-widget-spacing: ag-derived(cell-horizontal-padding),
//
//        // Height of grid rows
//            row-height: ag-derived(grid-size, $times: 6, $plus: 1),
//
//        // Height of header rows
//            header-height: ag-derived(row-height),
//
//        // Height of items in lists (example of lists are dropdown select inputs and column menu set filters)
//            list-item-height: ag-derived(grid-size, $times: 5),
//
//        // How much to indent child columns in the column tool panel relative to their parent
//            column-select-indent-size: ag-derived(grid-size, $plus: icon-size),
//
//        // How much to indent child rows in the grid relative to their parent row
//            row-group-indent-size: ag-derived(cell-widget-spacing, $plus: icon-size),
//
//        // How much to indent child columns in the filters tool panel relative to their parent
//            filter-tool-panel-group-indent: 16px,
//
//        // Cause tabs to stretch across the full width of the tab panel header
//            full-width-tabs: false,
//
//        // Fonts
//            font-family: ("Helvetica Neue", sans-serif),
//            font-size: 14px,
//
//        // The name of the font family you're using
//            icon-font-family: $ag-theme-base-icon-font-family, // this var exported by ag-theme-base-font-vars.scss
//
//        // A URI (data: URI or web URL) to load the icon font from. NOTE: if your icon font is already loaded in the app's HTML page, set this to null to avoid embedding unnecessry font data in the compiled theme.
//            icons-data: $ag-theme-base-icons-data,             // this var exported by ag-theme-base-font-vars.scss
//            icons-font-codes: $ag-theme-base-icons-font-codes, // this var exported by ag-theme-base-font-vars.scss
//
//        // cards are elements that float above the UI
//            card-radius: ag-derived(border-radius),
//
//        // the default card shadow applies to simple cards like column drag indicators and text editors
//            card-shadow: none,
//
//        // override the shadow for popups - cards that contain complex UI, like menus and charts
//            popup-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3),
//
//        // Use Font Awesome for icons
//            icon-font-family: "Font Awesome 5 Free",
//        // The @imports above embed the Font Awesome data, so set icons-data to null to avoid
//        // the theme's default font from being embedded too
//            icons-data: null,
//        // Map ag-Grid icon names to Font Awesome character codes
//            icons-font-codes: (
//                    "aggregation": "\f247",
//                    "arrows": "\f0b2",
//                    "asc": "\f062",
//                    "cancel": "\f057",
//                    "chart": "\f080",
//                    "color-picker": "\f576",
//                    "columns": "\f0db",
//                    "contracted": "\f146",
//                    "copy": "\f0c5",
//                    "cross": "\f00d",
//                    "desc": "\f063",
//                    "expanded": "\f0fe",
//                    "eye-slash": "\f070",
//                    "eye": "\f06e",
//                    "filter": "\f0b0",
//                    "first": "\f100",
//                    "grip": "\f58e",
//                    "group": "\f5fd",
//                    "last": "\f101",
//                    "left": "\f060",
//                    "linked": "\f0c1",
//                    "loading": "\f110",
//                    "maximize": "\f2d0",
//                    "menu": "\f0c9",
//                    "minimize": "\f2d1",
//                    "next": "\f105",
//                    "none": "\f338",
//                    "not-allowed": "\f05e",
//                    "paste": "\f0ea",
//                    "pin": "\f276",
//                    "pivot": "\f074",
//                    "previous": "\f104",
//                    "right": "\f061",
//                    "save": "\f0c7",
//                    "small-down": "\f107",
//                    "small-left": "\f104",
//                    "small-right": "\f105",
//                    "small-up": "\f106",
//                    "tick": "\f00c",
//                    "tree-closed": "\f105",
//                    "tree-indeterminate": "\f068",
//                    "tree-open": "\f107",
//                    "unlinked": "\f127",
//            )
//    ))
//}
//
