@import "./ag-theme-common";

$foreground-opacity: 0.87 !default;
$secondary-foreground-color-opacity: 0.54 !default;
$disabled-foreground-color-opacity: 0.38 !default;

@mixin ag-theme-balham($params) {
    $border-color: map-get($params, "border-color");
    $default-background: map-get($params, "default-background");
    $foreground-color: map-get($params, "foreground-color");
    $grid-size: map-get($params, "grid-size");
    $header-background-color: map-get($params, "header-background-color");
    $header-height: map-get($params, "header-height");
    $icon-size: map-get($params, "icon-size");
    $panel-background-color: map-get($params, "panel-background-color");
    $primary-color: map-get($params, "primary-color");
    $range-selection-highlight-color: map-get($params, "range-selection-highlight-color");
    $row-height: map-get($params, "row-height");
    $selected-color: map-get($params, "selected-color");

    .ag-header,
    .ag-row,
    .ag-header-cell,
    .ag-header-group-cell,
    .ag-rich-select-value,
    .ag-root {
        box-sizing: border-box;
    }

    %card {
        border: 1px solid $border-color;
    }

    %tab {
        border: 1px solid transparent;
        border-bottom-width: 0;
        display: inline-block;
        margin: $grid-size;
        margin-bottom: 0;
        padding: $grid-size $grid-size * 2;
    }

    %selected-tab {
        background-color: $default-background;
        border-bottom: 2px solid $primary-color;
        border-bottom: 2px solid $default-background;
        border-color: $border-color;
    }

    @include ag-grid-theme($params);

    .ag-header {
        background-color: $header-background-color;
        border-bottom: 1px solid $border-color;
    }

    .ag-cell-highlight {
        background-color: $range-selection-highlight-color !important;
    }

    .ag-header-cell-resize {
        right: -($grid-size) + 1px;
    }

    .ag-rtl .ag-header .ag-header-cell-resize {
        left: -($grid-size);
    }

    .ag-header-cell-resize::after {
        height: $header-height - $grid-size * 4;
        margin-top: $grid-size * 2;
    }

    .ag-header-cell::after,
    .ag-header-group-cell::after {
        border-right: 1px solid transparentize($border-color, 0.5);
        content: " ";
        height: $header-height - $grid-size * 4;
        margin-top: $grid-size * 2;
        position: absolute;
        right: 0;
        text-indent: -2000px;
        top: 0;
    }

    .ag-column-drop-horizontal.ag-column-drop {
        border: 1px solid $border-color;
        border-bottom: 0;
    }

    .ag-column-drop-horizontal.ag-column-drop.ag-width-half:first-child {
        border-right: 0;
    }

    .ag-row {
        border-bottom-color: lighten($border-color, 10);
    }

    .ag-row-selected {
        border-bottom-color: $selected-color;
    }

    .ag-row-drag {
        background-position-y: center;
    }

    .ag-column-drag {
        background-position-y: center;
    }

    .ag-column-drop-cell {
        height: $grid-size * 6 !important;

        .ag-column-drop-cell-button {
            box-sizing: border-box;
            height: calc(100% - #{$grid-size});
            margin-bottom: $grid-size / 2;
            margin-top: $grid-size / 2;
        }

        .ag-column-drop-cell-button:hover {
            opacity: 1;
            // border: 1px solid $border-color;
        }
    }

    .ag-column-drop-vertical .ag-column-drop-cell {
        margin-left: $grid-size * 2;
        margin-right: $grid-size * 2;

        .ag-column-drop-cell-text {
            line-height: $grid-size * 6;
            margin-left: $grid-size * 2;
        }
    }

    .ag-column-drop-horizontal {
        background-color: $panel-background-color;
        height: $header-height;

        .ag-column-drop-empty-message {
            line-height: $header-height;
        }

        .ag-column-drop-cell-text {
            line-height: $grid-size * 6;
            margin-left: $grid-size * 2;
        }
    }

    .ag-filter .ag-filter-header-container {
        height: $grid-size * 6;
    }

    .ag-root {
        border: 1px solid $border-color;
    }

    // bootstrap overrides
    .ag-tab {
        box-sizing: initial;
    }

    .ag-filter .ag-filter-value {
        line-height: $icon-size + $grid-size;
    }

    // tool panel
    .ag-column-panel {
        border-right: 1px solid $border-color;
        border-bottom: 1px solid $border-color;

        .ag-column-select-panel {
            padding-bottom: $grid-size * 2;

            .ag-column-select-column-group,
            .ag-column-select-column {
                height: $grid-size * 5;
                line-height: $grid-size * 5;
            }
        }

        .ag-column-drop {
            padding-bottom: $grid-size * 2;
            padding-top: $grid-size * 2;

            .ag-icon {
                margin-bottom: $grid-size;
            }

            .ag-column-drop-title {
                display: inline-block;
                float: none;
                margin-bottom: $grid-size;
            }

            .ag-column-drop-empty-message {
                height: $grid-size * 4;
                line-height: $grid-size * 4;
                padding-left: $icon-size + $grid-size * 2;
            }
        }
    }

    .ag-rtl .ag-tool-panel,
    .ag-rtl .ag-column-panel {
        border-left: 1px solid $border-color;
        border-right: 0;
    }

    // real crude adjustments, due to line of elements with display: inline-block in the group cell
    .ag-icon-expanded,
    .ag-icon-contracted {
        transform: translateY(2px);
    }

    .ag-rtl .ag-icon-expanded {
        transform: translateY(2px) rotate(180deg);
    }

    // context menu spacing
    .ag-menu-option {
        height: $grid-size * 7;
        line-height: $grid-size * 7;
    }

    .ag-column-select-panel {
        .ag-column-select-column-group,
        .ag-column-select-column {
            height: $grid-size * 5;
            line-height: $grid-size * 5;
        }
    }

    .ag-filter-filter {
        margin-left: $grid-size;
        margin-right: $grid-size;
        width: calc(100% - #{$grid-size * 2});
    }

    .ag-tab-header {
        border-bottom: 1px solid $border-color;

        .ag-tab {
            margin-bottom: -2px;
        }

        .ag-tab.ag-tab-selected {
            background-color: $default-background;
            border-bottom-color: transparent;
        }
    }

    .ag-tab-body,
    .ag-popup-editor,
    .ag-menu {
        background-color: $default-background;
        color: $foreground-color;
    }

    .ag-cell-inline-editing {
        height: $row-height;
        padding: 0;

        input {
            box-sizing: border-box;
        }
    }

    .ag-details-row {
        background-color: $default-background;
    }

    .ag-overlay-loading-wrapper {
        background-color: rgba(255, 255, 255, 0.5);
    }

    .ag-overlay-loading-center {
        background-color: #fff;
        border: 1px solid $border-color;
        color: $foreground-color;
        padding: $grid-size * 4;
    }

    $ag-range-selected-color-1: map-get($params, "ag-range-selected-color-1");
    $ag-range-selected-color-2: map-get($params, "ag-range-selected-color-2");
    $ag-range-selected-color-3: map-get($params, "ag-range-selected-color-3");
    $ag-range-selected-color-4: map-get($params, "ag-range-selected-color-4");

    // 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-rich-select-value {
        border-bottom: 1px solid $border-color;
    }

    .ag-filter-apply-panel {
        border-top: 1px solid $border-color;
    }

    .ag-header-cell-moving {
        background-color: $default-background;
    }
}