@import '../../style/mixin.less';
@import './filters-popup.less';
@import './token.less';

@table-prefix-cls: ~'@{prefix}-table';

@table-cls-tr: ~'@{table-prefix-cls}-tr';
@table-cls-th: ~'@{table-prefix-cls}-th';
@table-cls-td: ~'@{table-prefix-cls}-td';

.expandBtn() {
    width: @table-size-expand-button;
    height: @table-size-expand-button;
    line-height: @table-size-expand-button;
    border-radius: @table-border-radius-expand-button;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: @table-color-bg-expand-icon;
    color: @table-color-expand-icon;
    font-size: @table-font-size-expand-button;
    outline: none;
    transition: background-color @transition-duration-1 @transition-timing-function-linear;
    padding: 0;
    cursor: pointer;
    border: @table-border-expand-icon-width solid @table-color-expand-icon-border;
    box-sizing: border-box;

    &:hover {
        background-color: @table-color-bg-expand-icon_hover;
        color: @table-color-expand-icon_hover;
        border-color: @table-color-expand-icon-border_hover;
    }
}

.table-size(@size) {
    .@{table-prefix-cls}-th-item {
        padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
    }

    // https://github.com/bee-design/bee-design/issues/132
    .@{table-prefix-cls}-th-item.@{table-prefix-cls}-col-has-filter {
        padding-right: 28px;
    }

    .@{table-prefix-cls}-col-has-sorter.@{table-prefix-cls}-col-has-filter {
        padding-right: 0;
    }

    .@{table-prefix-cls}-col-has-sorter.@{table-prefix-cls}-col-has-filter
    .@{table-prefix-cls}-cell-with-sorter {
        padding-right: 28px;
    }

    .@{table-prefix-cls}-col-has-sorter {
        padding: 0;
    }

    .@{table-prefix-cls}-col-has-sorter .@{table-prefix-cls}-cell-with-sorter {
        padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
        cursor: pointer;
    }

    // rtl
    .@{table-prefix-cls}-rtl .@{table-prefix-cls}-th-item.@{table-prefix-cls}-col-has-filter {
        padding-left: 28px;
        padding-right: ~'@{table-size-@{size}-padding-horizontal}';
    }

    .@{table-prefix-cls}-rtl .@{table-prefix-cls}-col-has-sorter.@{table-prefix-cls}-col-has-filter {
        padding-left: 0;
        padding-right: 0;
    }

    .@{table-prefix-cls}-rtl
    .@{table-prefix-cls}-col-has-sorter.@{table-prefix-cls}-col-has-filter
    .@{table-prefix-cls}-cell-with-sorter {
        padding-right: 0;
        padding-right: ~'@{table-size-@{size}-padding-horizontal}';
    }
    // rtl end

    .@{table-cls-td} {
        padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
        font-size: ~'@{table-size-@{size}-font-size}';
    }

    .@{table-cls-th} {
        font-size: ~'@{table-size-@{size}-font-header-size}';
    }

    .@{table-prefix-cls}-footer {
        padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
    }

    // expand row in fixed
    .@{table-prefix-cls}-expand-fixed-row {
        margin: ~'-@{table-size-@{size}-padding-vertical}' ~'-@{table-size-@{size}-padding-horizontal}';
        padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
    }

    // sub table
    .@{table-prefix-cls}-expand-content .@{table-cls-td} .@{table-prefix-cls} {
        margin: ~'-@{table-size-@{size}-padding-vertical}' ~'-@{table-size-@{size}-padding-horizontal}' ~'calc(-@{table-size-@{size}-padding-vertical} - @{table-border-width})' ~'-@{table-size-@{size}-padding-horizontal}';
    }

    // editor row
    .@{table-prefix-cls}-editable-row {
        .@{table-prefix-cls}-cell-wrap-value {
            padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
        }
    }
}

// Size
.table-size(default);

.@{table-prefix-cls}-size-middle {
    .table-size(middle);
}

.@{table-prefix-cls}-size-small {
    .table-size(small);
}

.@{table-prefix-cls}-size-mini {
    .table-size(mini);
}

.@{table-prefix-cls} {
    position: relative;

    // spin
    .@{prefix}-spin {
        display: block;
    }

    > .@{prefix}-spin > .@{prefix}-spin-children::after {
        z-index: 2;
    }

    // footer
    &-footer {
        border-radius: 0 0 @table-border-radius @table-border-radius;
    }

    // box-shadow of the fixed column on the left
    &-scroll-position-right &-col-fixed-left-last::after,
    &-scroll-position-middle &-col-fixed-left-last::after {
        box-shadow: @table-shadow-left;
    }

    // box-shadow of the fixed column on the right
    &-scroll-position-left &-col-fixed-right-first::after,
    &-scroll-position-middle &-col-fixed-right-first::after {
        box-shadow: @table-shadow-right;
    }

    // box-shadow on the left side of the scroll table
    &:not(&-has-fixed-col-left) {
        &.@{table-prefix-cls}-scroll-position-right,
        &.@{table-prefix-cls}-scroll-position-middle {
            .@{table-prefix-cls}-content-scroll::before {
                box-shadow: @table-shadow-left;
            }
        }
    }

    // box-shadow on the right side of the scroll table
    &:not(&-has-fixed-col-right) {
        &.@{table-prefix-cls}-scroll-position-left,
        &.@{table-prefix-cls}-scroll-position-middle {
            .@{table-prefix-cls}-content-scroll::after {
                box-shadow: @table-shadow-right;
            }
        }
    }

    &-layout-fixed {
        .@{table-prefix-cls}-content-inner {
            overflow-x: auto;
            overflow-y: hidden;
        }

        table {
            table-layout: fixed;
        }
    }

    thead > &-tr > &-th {
        border-bottom: @table-border-width @table-border-style @table-color-border;
    }

    thead > &-tr:not(:last-child) > &-th[colspan] {
        border-bottom: 0;
    }

    table {
        min-width: 100%;
        width: 100%;
        margin: 0;
        border-spacing: 0;
        border-collapse: separate;

        thead tr:first-child {
            th:first-child {
                border-radius: @table-border-radius 0 0 0;
            }

            th:last-child {
                border-radius: 0 @table-border-radius 0 0;
            }
        }
    }

    &-th {
        box-sizing: border-box;
        text-align: left;
        color: @table-color-text-header-cell;
        background-color: @table-color-bg-header-cell;
        line-height: @line-height-base;
        font-weight: @table-font-weight-header-text;

        &[colspan] {
            text-align: center;
        }
    }

    &-td {
        box-sizing: border-box;
        text-align: left;
        color: @table-color-text-body-cell;
        background-color: @table-color-bg-body-cell;
        border-bottom: @table-border-width @table-border-style @table-color-border;
        line-height: @line-height-base;
    }

    &-th&-col-sorted {
        background-color: @table-color-bg-header-sorted-cell;
    }

    &-td&-col-sorted {
        background-color: @table-color-bg-body-sorted-cell;
    }

    &-col-fixed-left,
    &-col-fixed-right {
        position: sticky;
        z-index: 1;
    }

    &-col-fixed-left-last::after,
    &-col-fixed-right-first::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: -@table-border-width;
        width: @table-size-shadow-wrapper-width;
        pointer-events: none;
        transform: translateX(-100%);
        transition: box-shadow @transition-duration-1 @transition-timing-function-linear;
        box-shadow: none;
    }

    &-col-fixed-left-last::after {
        left: unset;
        transform: translateX(100%);
        right: 0;
    }

    &-cell-text-ellipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    &-cell-text-ellipsis &-cell-with-sorter {
        display: flex;
        align-items: center;
    }

    &-cell-text-ellipsis &-th-item-title {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    // useless
    &-editable-row {
        .@{table-prefix-cls}-cell-wrap-value {
            border: @table-border-width solid @table-color-editable-body-cell-border;
            border-radius: @table-border-radius;
            transition: all @transition-duration-1 @transition-timing-function-linear;
            cursor: pointer;
        }

        &:hover {
            .@{table-prefix-cls}-cell-wrap-value {
                border: @table-border-width solid @table-color-border;
            }
        }
    }

    &-cell {
        word-break: break-all;
        width: 100%;

        &-indent {
            height: 1px;
            float: left;
        }
    }

    // Expand
    &-expand-icon-cell {
        button {
            .expandBtn();
        }
    }

    &-cell-expand-icon {
        // https://github.com/bee-design/bee-design/issues/298
        float: left;

        button {
            .expandBtn();

            margin-right: @table-spacing-expand-button-margin-right;
        }
    }

    &-cell-expand-icon-hidden {
        display: inline-block;
        width: @table-size-expand-button;
        height: @table-size-expand-button;
        margin-right: @table-spacing-expand-button-margin-right;
    }

    &-expand-content .@{table-cls-td} {
        background-color: @table-color-bg-expand-content;
    }

    &-expand-fixed-row {
        position: sticky;
        left: 0;
        box-sizing: border-box;
    }

    &-expand-content .@{table-cls-td} & {
        .@{table-prefix-cls}-container {
            border: none;
        }

        .@{table-cls-th} {
            border-bottom: @table-border-width @table-border-style @table-color-border;
        }

        .@{table-cls-th},
        .@{table-cls-td} {
            background-color: @table-color-bg-expand-content;
        }

        .@{table-prefix-cls}-pagination {
            margin-bottom: @table-spacing-pagination-margin;
        }
    }

    // Selection
    // & &-th&-operation &-th-item,
    // & &-td&-operation {
    //   padding-left: @table-spacing-selection-padding-horizontal;
    //   padding-right: @table-spacing-selection-padding-horizontal;
    // }

    &-th&-operation &-th-item,
    &-td&-operation {
        text-align: center;
        padding: 0;
    }

    &-radio,
    &-checkbox {
        justify-content: center;
    }

    &-checkbox .@{prefix}-checkbox,
    &-radio .@{prefix}-radio {
        padding-left: 0;
    }

    // colgroup selection
    &-selection-col {
        width: @table-size-selection-col-width;
    }

    &-expand-icon-col {
        width: @table-size-expand-icon-col-width;
    }

    &-radio &-th-item,
    &-checkbox &-th-item,
    div&-selection-col &-th-item,
    div&-expand-icon-col &-th-item {
        padding: 0;
    }

    &-th-item {
        position: relative;
        transition: background-color @transition-duration-1 @transition-timing-function-linear;
    }

    &-cell-mouseenter {
        background-color: @table-color-bg-header-sorted-cell_hover;
    }

    &-cell-next-ascend &-sorter-icon {
        .@{prefix}-icon-caret-up {
            color: @table-color-header-sorter-icon_next;
        }
    }

    &-cell-next-descend &-sorter-icon {
        .@{prefix}-icon-caret-down {
            color: @table-color-header-sorter-icon_next;
        }
    }

    &-sorter {
        display: inline-block;
        margin-left: @table-spacing-header-sorter-icon-margin-left;
        vertical-align: -3px;
    }

    &-sorter&-sorter-direction-one {
        vertical-align: 0;
    }

    &-sorter-icon {
        position: relative;
        height: @table-size-header-sorter-icon-height;
        line-height: @table-size-header-sorter-icon-height;
        width: @table-font-size-header-sorter-icon;
        overflow: hidden;

        .@{prefix}-icon-caret-up,
        .@{prefix}-icon-caret-down {
            position: absolute;
            top: 50%;
            font-size: @table-font-size-header-sorter-icon;
            color: @table-color-header-sorter-icon;
            transition: all @transition-duration-1 @transition-timing-function-linear;
        }

        .@{prefix}-icon-caret-up {
            top: @table-position-header-sorter-icon-up-top;
            left: 0;
        }

        .@{prefix}-icon-caret-down {
            top: @table-position-header-sorter-icon-down-top;
            left: 0;
        }

        &&-active {
            svg {
                color: @table-color-header-sorter-icon_active;
            }
        }
    }

    &-filters {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        right: 0;
        width: @table-size-filters-width;
        height: 100%;
        background-color: transparent;
        line-height: 1;
        vertical-align: 0;
        cursor: pointer;
        transition: all @transition-duration-1 @transition-timing-function-linear;

        &:hover,
        &-open {
            background-color: @table-color-bg-header-filters-icon_hover;
        }

        svg {
            color: @table-color-header-filters-icon;
            font-size: @table-font-size-filters-icon;
            transition: all @transition-duration-1 @transition-timing-function-linear;
        }

        &-active {
            svg {
                color: @table-color-header-filters-icon_active;
            }
        }
    }

    /* ---- Table sorter, filter, checkbox, radio (End) ---- */

    &-container {
        position: relative;
        border-radius: @table-border-radius @table-border-radius 0 0;
    }

    &-header {
        border-radius: @table-border-radius @table-border-radius 0 0;
    }

    &-content-scroll {
        width: 100%;
        overflow: hidden;
        // chrome not fluent: https://codepen.io/quanqqq/pen/BaLpEQd?editors=0010
        // border-radius: @table-border-radius @table-border-radius 0 0 0;

        .@{table-prefix-cls}-content-inner {
            width: auto;
        }

        &::before,
        &::after {
            content: '';
            position: absolute;
            top: -@table-border-width;
            bottom: -@table-border-width;
            height: 100%;
            width: @table-size-shadow-wrapper-width;
            transition: box-shadow @transition-duration-1 @transition-timing-function-linear;
            box-shadow: none;
            pointer-events: none;
            z-index: 1;
        }

        &::before {
            border-top-left-radius: @table-border-radius;
            left: 0;
        }

        &::after {
            border-top-right-radius: @table-border-radius;
            right: 0;
        }
    }

    &-header {
        scrollbar-color: transparent transparent;
        background-color: @table-color-bg-header-cell;

        &::-webkit-scrollbar {
            background-color: transparent;
        }

        overflow-x: scroll;
        overflow-y: hidden;
    }

    &-body {
        position: relative;
        overflow: auto;
        background-color: @table-color-body-background;
    }

    &-no-data {
        padding: 20px;
        line-height: 40px;
        box-sizing: border-box;
        font-size: 14px;
        text-align: center;
    }

    &-border&-fixed-column &-empty-row &-td:first-child {
        border-bottom: 0;
        border-left: 0;
    }

    &-border {
        .@{table-prefix-cls}-container {
            border-right: @table-border-width @table-border-style @table-color-border;
            border-top: @table-border-width @table-border-style @table-color-border;

            &::before {
                content: '';
                position: absolute;
                background-color: @table-color-border;
                width: 100%;
                height: @table-border-width;
                left: 0;
                bottom: 0;
                z-index: 2;
            }
        }

        .@{table-cls-th}:first-child,
        .@{table-cls-td}:first-child {
            border-left: @table-border-width @table-border-style @table-color-border;
        }

        .@{table-prefix-cls}-expand-fixed-row {
            border-left: @table-border-width @table-border-style @table-color-border;
        }

        .@{table-prefix-cls}-footer {
            border: @table-border-width @table-border-style @table-color-border;
            border-top: 0;
        }
    }

    &-border-cell {
        .@{table-cls-th},
        .@{table-cls-td} {
            border-left: @table-border-width @table-border-style @table-color-border;
        }

        thead > .@{table-cls-tr}:not(:last-child) > .@{table-cls-th}[colspan] {
            border-bottom: @table-border-width @table-border-style @table-color-border;
        }
    }

    &-border-header-cell {
        .@{table-cls-th} {
            border-left: @table-border-width @table-border-style @table-color-border;
        }

        thead > .@{table-cls-tr}:not(:last-child) > .@{table-cls-th}[colspan] {
            border-bottom: @table-border-width @table-border-style @table-color-border;
        }
    }

    &-border-body-cell {
        .@{table-cls-td} {
            border-left: @table-border-width @table-border-style @table-color-border;
        }
    }

    &-border-cell:not(&-border) {
        .@{table-cls-th}:first-child,
        .@{table-cls-td}:first-child {
            border-left: 0;
        }
    }

    // stripe: true
    &-stripe {
        .@{table-cls-tr}:nth-child(even) .@{table-cls-td} {
            background-color: @table-color-bg-body-stripe-row;
        }
    }

    &-ghost {
        .@{table-cls-th},.@{table-cls-td} {
            background-color: transparent;
            border-bottom: 1px solid var(--color-neutral-2)
        }
    }

    &-hover {
        .@{table-cls-tr}:not(.@{table-prefix-cls}-empty-row):hover {
            .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {
                background-color: @table-color-bg-body-row_hover;
            }

            .@{table-cls-td}.@{table-prefix-cls}-col-fixed-left,
            .@{table-cls-td}.@{table-prefix-cls}-col-fixed-right {
                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: @table-color-bg-body-row_hover;
                    z-index: -1;
                }
            }
        }

        // 展开行的hover效果
        .@{table-prefix-cls}-expand-content:not(.@{table-prefix-cls}-empty-row):hover
        .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {
            background-color: @table-color-bg-expand-content_hover;
        }

        // 去除嵌套子表格的 hover 效果
        .@{table-prefix-cls}-expand-content .@{table-cls-td} & {
            .@{table-cls-tr}:not(.@{table-prefix-cls}-empty-row) {
                .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {
                    background-color: transparent;
                }

                .@{table-cls-td}.@{table-prefix-cls}-col-fixed-left,
                .@{table-cls-td}.@{table-prefix-cls}-col-fixed-right {
                    &::before {
                        background-color: transparent;
                    }
                }
            }
        }
    }

    // Active row
    &-type-radio &-row-checked.@{table-cls-tr} .@{table-cls-td} {
        background-color: @table-color-bg-body-row_active;
    }

    // virtualized
    &-virtualized table {
        table-layout: fixed;
    }

    &-virtualized div&-body div&-tr {
        display: flex;
    }

    &-virtualized div&-body div&-td {
        display: flex;
        align-items: center;
        flex: 1;
    }

    // https://github.com/bee-design/bee-design/issues/695
    &-virtualized &-selection-col {
        max-width: @table-size-selection-col-width;
    }

    &-virtualized &-expand-icon-col {
        max-width: @table-size-expand-icon-col-width;
    }

    // summary
    div&-tfoot {
        width: 100%;
        overflow-x: scroll;
        background-color: @table-color-bg-tfoot;
        scrollbar-color: transparent transparent;
        position: relative;
        z-index: 1;
        box-shadow: 0 -@table-border-width 0 @table-color-border;

        &::-webkit-scrollbar {
            background-color: transparent;
        }
    }

    &-tfoot &-td {
        background-color: @table-color-bg-tfoot;
    }
}

.@{table-prefix-cls}-pagination {
    display: flex;
    justify-content: flex-end;

    &-left {
        justify-content: flex-start;
    }

    &-center {
        justify-content: center;
    }

    &-top {
        margin-bottom: @table-spacing-pagination-margin;
        margin-top: 0;
    }

    .@{prefix}-pagination {
        margin-top: @table-spacing-pagination-margin;
    }
}

// RTL
.@{table-prefix-cls} {
    &-rtl {
        direction: rtl;
    }

    &-rtl&-border {
        .@{table-cls-th}:first-child,
        .@{table-cls-td}:first-child {
            border-left: 0;
            border-right: @table-border-width @table-border-style @table-color-border;
        }
    }

    &-rtl&-border-cell {
        .@{table-cls-th},
        .@{table-cls-td} {
            border-left: @table-border-width @table-border-style @table-color-border;
        }
    }

    &-rtl table {
        thead tr:first-child {
            th:first-child {
                border-radius: 0 @table-border-radius 0 0;
            }

            th:last-child {
                border-radius: @table-border-radius 0 0 0;
            }
        }
    }

    &-rtl &-th,
    &-rtl &-td {
        text-align: right;
    }

    &-rtl &-th&-operation &-th-item,
    &-rtl &-td&-operation {
        text-align: center;
    }

    &-rtl&-border &-container {
        border-left: @table-border-width @table-border-style @table-color-border;
        border-right: 0;
    }

    &-rtl&-border-cell {
        .@{table-cls-th},
        .@{table-cls-td} {
            border-left: 0;
            border-right: @table-border-width @table-border-style @table-color-border;
        }
    }

    &-rtl&-border-header-cell {
        .@{table-cls-th} {
            border-left: 0;
            border-right: @table-border-width @table-border-style @table-color-border;
        }
    }

    &-rtl&-border-body-cell {
        .@{table-cls-td} {
            border-left: 0;
            border-right: @table-border-width @table-border-style @table-color-border;
        }
    }

    &-rtl&-border-cell:not(&-border) {
        .@{table-cls-th}:first-child,
        .@{table-cls-td}:first-child {
            border-right: 0;
        }
    }

    &-rtl &-cell-indent {
        float: right;
    }

    &-rtl &-cell-expand-icon {
        float: right;

        button {
            margin-left: @table-spacing-expand-button-margin-right;
            margin-right: 0;
        }
    }

    &-rtl &-cell-expand-icon-hidden {
        margin-left: @table-spacing-expand-button-margin-right;
        margin-right: 0;
    }

    &-rtl &-filters {
        left: 0;
        right: unset;
    }

    &-rtl &-sorter {
        margin-left: 0;
        margin-right: @table-spacing-header-sorter-icon-margin-left;
    }

    &-rtl &-col-fixed-left-last::after,
    &-rtl &-col-fixed-right-first::after {
        left: unset;
        right: -20px;
    }

    &-rtl &-col-fixed-left-last::after {
        left: -20px;
        right: unset;
    }

    &-rtl&-scroll-position-right &-col-fixed-left-last::after {
        box-shadow: none;
    }

    &-rtl&-scroll-position-right &-col-fixed-right-first::after,
    &-rtl&-scroll-position-middle &-col-fixed-right-first::after {
        box-shadow: @table-shadow-left;
    }

    &-rtl&-scroll-position-left &-col-fixed-right-first::after {
        box-shadow: none;
    }

    &-rtl&-scroll-position-left &-col-fixed-left-last::after,
    &-rtl&-scroll-position-middle &-col-fixed-left-last::after {
        box-shadow: @table-shadow-right;
    }

    &-rtl&:not(&-has-fixed-col-left) {
        &.@{table-prefix-cls}-scroll-position-right,
        &.@{table-prefix-cls}-scroll-position-middle {
            .@{table-prefix-cls}-content-scroll::before {
                box-shadow: none;
            }

            .@{table-prefix-cls}-content-scroll::after {
                box-shadow: @table-shadow-right;
            }
        }
    }

    &-rtl&:not(&-has-fixed-col-right) {
        &.@{table-prefix-cls}-scroll-position-left,
        &.@{table-prefix-cls}-scroll-position-middle {
            .@{table-prefix-cls}-content-scroll::before {
                box-shadow: @table-shadow-left;
            }

            .@{table-prefix-cls}-content-scroll::after {
                box-shadow: none;
            }
        }
    }
}