// (C) 2007-2021 GoodData Corporation
@import "~@gooddata/goodstrap/lib/core/styles/variables";
@import "~@gooddata/goodstrap/lib/Button/styles/variables";

$ag-icons-path: "~ag-grid-community/src/styles/ag-theme-balham/icons/";

$gd-border-color: transparent;
$font-size: 12px;
$font-family: $gd-font-primary;
$foreground-color: $gd-color-text;
$default-background: $gd-color-white;
$header-background-color: $gd-color-white;
$odd-row-background-color: transparent;
$primary-color: transparent;
$secondary-foreground-color: $gd-color-label;
$secondary-font-weight: normal;
$hover-color: transparentize($gd-color-label, 0.9);
$cell-horizontal-border: none;
$cell-border: 1px dashed transparent;
$cell-border-color: transparentize($gd-color-disabled, 0.5);
$header-cell-resize-width: 20px;

.gd-table-component {
    @import "~ag-grid-community/src/styles/ag-grid";
    @import "~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham";

    .gd-table {
        .ag-root-wrapper {
            text-align: left;
        }

        .ag-root {
            border: none;
        }

        .ag-font-style {
            user-select: auto;
        }

        .ag-header-cell,
        .ag-header-group-cell {
            &::after {
                display: none;
            }
        }

        .ag-header {
            border-bottom: none;
        }

        .ag-cell {
            outline: none;

            &,
            &.ag-cell-focus {
                border-top: $cell-border;
                border-top-color: $cell-border-color;
                border-right: none;
                border-left: none;
            }

            &,
            .ag-react-container {
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        [row-index="0"] {
            .ag-cell {
                border-top-color: transparent;
            }
        }

        .ag-header-cell,
        .gd-column-group-header {
            border-bottom: $cell-border;
            border-bottom-color: $cell-border-color;
        }

        .gd-column-group-header-0,
        .gd-column-measure-0,
        .ag-header-group-cell-with-group {
            &,
            &.ag-cell-focus {
                border-left: $cell-border;
                border-left-color: $cell-border-color;
            }
        }

        .gd-column-index-0,
        .gd-column-group-header--first {
            border-left: none;
        }

        .gd-column-group-header--empty {
            border-bottom-color: transparent;

            .ag-header-cell-resize {
                display: none;
            }
        }

        .ag-header-row {
            &:last-child {
                border-bottom: none;

                // refactor?
                // stylelint-disable-next-line max-nesting-depth
                .ag-header-cell,
                .ag-header-group-cell-with-group {
                    border-bottom-style: solid;
                }

                // refactor?
                // stylelint-disable-next-line max-nesting-depth
                .gd-pivot-table-header {
                    min-height: 30px;
                }
            }
        }

        .ag-header-group-cell {
            overflow: visible;
        }

        .ag-header-cell-resize {
            right: -$header-cell-resize-width / 2;
            width: $header-cell-resize-width;
            opacity: 0;

            &::after {
                content: "";
                box-sizing: content-box;
                display: block;
                width: $header-cell-resize-width / 2;
                margin-right: $header-cell-resize-width / 2;
                border-right: 1px solid $gd-color-highlight;
                text-indent: $header-cell-resize-width / 2;
                height: 16px;
            }
        }

        .gd-column-group-header:hover {
            .gd-pivot-table-header-label--clickable,
            .gd-pivot-table-header-menu ~ .gd-pivot-table-header-label {
                background-color: $gd-color-highlight-dimmed;
            }

            .ag-header-cell-resize {
                opacity: 1;
            }
        }

        .gd-table-row {
            border: none;
        }

        .gd-row-total {
            border-bottom-color: transparent;
            color: $gd-color-dark;
            font-weight: bold;
            background-color: #e7ebef;

            &,
            &.ag-cell-focus {
                border-top: 1px solid transparentize($gd-color-disabled, 0.5);
            }
        }

        .gd-table-row-subtotal {
            font-weight: bold;
            border-top: 1px solid transparentize($gd-color-disabled, 0.5);
            &-even {
                background-color: #eff2f4;
            }
            &-odd {
                background-color: #f7f8f9;
            }
        }

        .gd-column-merged {
            display: none;
        }

        .gd-cell-hide {
            color: transparent;
            border-top: 1px solid transparent;
            background-color: white;
        }

        .gd-cell-show-hidden {
            color: inherit;
            font-weight: normal;
        }

        .gd-table-row-separator {
            border-top: 1px solid transparentize($gd-color-disabled, 0.5);
        }

        .ag-floating-top {
            position: absolute;
            z-index: 1;
            display: none;
            // stylelint-disable-next-line declaration-no-important
            overflow: hidden !important;
            pointer-events: none;
            border-bottom: none;

            &.gd-visible-sticky-row {
                display: inherit;
            }

            .ag-row {
                background-color: transparent;

                // refactor?
                // stylelint-disable-next-line max-nesting-depth
                .ag-cell {
                    background-color: #fff;
                    border-top-color: white;

                    // refactor?
                    // stylelint-disable-next-line max-nesting-depth
                    &.gd-hidden-sticky-column {
                        border-top-color: transparent;
                        background-color: transparent;
                        color: transparent;
                    }

                    // refactor?
                    // stylelint-disable-next-line max-nesting-depth
                    &.gd-measure-column,
                    &.gd-column-attribute-column {
                        display: none;
                    }
                }
            }
        }

        .ag-floating-bottom {
            // stylelint-disable-next-line declaration-no-important
            overflow: auto !important;
            border-top: none;
        }
    }
}

.gd-pivot-table-header {
    position: relative;
    display: flex;
    margin: 0 -11px 1px;
    flex-direction: row;
    min-height: 29px;
    line-height: 28px;

    .ag-header-group-cell-with-group & {
        line-height: 26px;
    }

    &-label {
        display: flex;
        flex: 1 1 auto;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-end;
        overflow: hidden;
        padding: 0 11px;

        &--right {
            justify-content: flex-end;
        }

        &--center {
            justify-content: center;
        }

        &--clickable {
            cursor: pointer;
        }

        &-text {
            position: relative;
            flex: 0 1 auto;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        > span {
            flex: 0 1 auto;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    &-next-sort {
        min-width: 12px;
    }

    &--numeric {
        flex-direction: row-reverse;
    }

    &--numeric &-label {
        &-text {
            text-align: right;
            flex: 1 1 auto;
        }
    }

    &--numeric &-sort {
        flex: 0 0 auto;
    }

    &--numeric &-next-sort {
        flex: 0 0 auto;
    }

    &-sort {
        flex: 1 0 auto;
    }

    &-menu {
        display: inline-flex;
        flex: 0 0 auto;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        border-top: 2px solid transparent;
        background-color: $gd-color-highlight-dimmed;
        opacity: 0;
        cursor: pointer;
        transition: width 200ms, opacity 100ms;

        &:hover {
            background-color: darken($gd-color-highlight-dimmed, 3%);
        }

        .menu-icon {
            width: 16px;
            height: 16px;
            background-image: url("~@gooddata/goodstrap/lib/core/styles/icons/menu-burger.svg");
        }

        &--hide {
            width: 0;
            opacity: 0;
        }

        &--show {
            width: 32px;
            opacity: 1;
        }

        &--open {
            &,
            .ag-header-cell-sortable & {
                // refactor?
                // stylelint-disable-next-line max-nesting-depth
                &,
                &:hover {
                    border-color: $button-normal-border-color;
                    background-color: $button-normal-hover-bg;
                }

                // refactor?
                // stylelint-disable-next-line max-nesting-depth
                &:active {
                    border-color: $button-normal-active-border-color;

                    @include gradient-linear(
                        $button-normal-active-gradient-top,
                        $button-normal-active-gradient-bottom
                    );
                }
            }
        }
    }

    &-arrow-up,
    &-arrow-down {
        display: inline-block;
        flex: 0 0 auto;
        margin-left: 4px;
        line-height: 16px;
        font-size: 12px;
        font-weight: normal;

        &::before {
            content: "\E60D";
            position: relative;
            top: 1px;
            display: inherit;
            font-family: Indigo, sans-serif;
            font-size: 10px;
            vertical-align: bottom;
        }
    }

    &-arrow-up::before {
        top: -2px;
        transform: rotate(180deg);
    }
}

.gd-aggregation-menu-item {
    .gd-list-item-header::before {
        content: "";
        position: absolute;
        top: 13px;
        left: 10px;
        display: block;
        width: 12px;
        height: 11px;
        background-image: url("~@gooddata/goodstrap/lib/core/styles/icons/rows.svg");
    }

    .gd-list-item.gd-menu-item {
        padding: 0;
        cursor: default;

        &::before {
            z-index: 1;
        }

        .gd-aggregation-menu-item-inner {
            position: relative;
            z-index: 2;
            flex: auto;
            padding: 4px 30px;
            cursor: pointer;
        }

        &.is-submenu .gd-aggregation-menu-item-inner {
            padding-right: 0;
            margin-right: 30px;
        }
    }

    .gd-aggregation-submenu .gd-aggregation-menu-item-inner {
        max-width: 190px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .gd-menuPosition-wrapper:hover .gd-list-item.gd-menu-item.is-submenu {
        color: $is-focused-color;
        background: $is-focused-background;
    }
}