@import "../lib.less";
@import "../variables/components/table.less";
@import "../variables/components/checkbox.less";
@import "../variables/components/radio.less";

.@{veui-prefix}-table {
    position: relative;
    overflow: hidden;
    border: 1px solid @veui-table-border-color;
    border-radius: @veui-table-border-radius;
    // border-top-style: none;
    // border-bottom-style: none;
    font-variant-numeric: tabular-nums;

    table {
        width: 100%;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
        white-space: nowrap;
    }

    &-main {
        height: 100%;
        overflow: auto;
        /* To workaround an edge case which triggers composition problems on Firefox */
        transform-style: preserve-3d;
        table {
            height: 100%;
        }
    }

    &-cell {
        display: flex;
        line-height: @veui-line-height-m;
        align-items: center;
        white-space: normal;
        word-break: break-all;
    }

    &-loading.veui-loading[ui~="overlay"] {
        z-index: 3;
        background-color:rgba(255, 255, 255, 0.8);
    }

    th,
    td {
        border: 1px @veui-table-border-color;
        text-align: left;
        .veui-transition(background-color, border-color);
    }

    thead th {
        border-bottom-style: solid;
        padding: @veui-table-cell-padding-y-s @veui-table-cell-padding-x @veui-table-cell-padding-y-s - 1  @veui-table-cell-padding-x;
        background-color: @veui-table-header-background-color;
        font-weight: @veui-table-header-font-weight;
        color: @veui-table-header-font-color;
    }

    &-cell-interactive:hover {
        background-color: @veui-table-header-background-color-hover;
    }

    &-cell-sortable {
        cursor: pointer;
    }

    td,
    tfoot th {
        border-top-style: solid;
        padding: @veui-table-cell-padding-y-s @veui-table-cell-padding-x @veui-table-cell-padding-y-s - 1  @veui-table-cell-padding-x;
        background-color: @veui-table-cell-background-color;
        color: @veui-table-cell-font-color;
    }

    td.@{veui-prefix}-table-no-data {
        padding: 60px 0;
    
        &.@{veui-prefix}-table-cell-hero .@{veui-prefix}-table-cell {
            padding: 0;
            justify-content: center;
            display: flex;
            flex-direction: column;
            color: @veui-table-body-height-no-data-color;
            .veui-icon {
                .size(@veui-table-body-height-no-data-icon);
                margin-bottom: @veui-table-body-height-no-data-margin-bottom;
            }
        }
    }

    tfoot th {
        background: @veui-table-tfoot-background-color;
        font-weight: @veui-table-header-font-weight;
    }

    tbody tr:first-child td {
        border-top-style: none;
    }

    &-bordered {
        border: 1px solid @veui-table-border-color;
        border-left-style: none;

        th,
        td {
            border-left-style: solid;
        }

        &::after {
            content: "";
            .absolute(0, _, 0, 0);
            width: 1px;
            background-color: @veui-table-border-color;
            z-index: 3;
        }
    }

    tr:hover {
        td {
            background-color: @veui-table-cell-background-color-hover;
        }

        .@{veui-prefix}-table-no-data {
            background-color: @veui-table-cell-background-color;
        }
    }

    .@{veui-prefix}-link {
        line-height: 1;
    }

    .@{veui-prefix}-button,
    .@{veui-prefix}-link {
        & + .@{veui-prefix}-button,
        & + .@{veui-prefix}-link {
            margin-left: @veui-table-action-spacing;
        }
    }

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

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

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

    &-overflow-shadow-right,
    &-overflow-shadow-left {
        .absolute(0, _);
        pointer-events: none;
        z-index: 2;
        .veui-transition(box-shadow);
    }

    &-overflow-shadow-edge {
        z-index: 3;
    }

    &-overflow-shadow-right {
        right: -20px;
    }

    &-overflow-shadow-left {
        left: -20px;
    }

    &-bordered &-overflow-shadow-left {
        left: -19px;
    }

    &-hit-right &-overflow-shadow-right,
    &-hit-left &-overflow-shadow-left {
        box-shadow: none;
    }

    &-bordered &-cell-sticky-left {
        &::after {
            content: "";
            .absolute(0, -1px, 0, _);
            width: 1px;
            background-color: @veui-table-border-color;
        }

    }

    & &-cell-hero {
        position: relative;
        z-index: 3;
        padding: 0;
    }

    &-cell-hero &-cell {
        position: sticky;
        right: 0;
        left: 0;
        padding: @veui-table-cell-padding-y-s @veui-table-cell-padding-x;
    }

    &-bordered &-cell-hero &-cell {
        left: 1px;
    }

    & &-cell-expand {
        .@{veui-prefix}-button {
            flex-grow: 0;
            color: @veui-table-expand-icon-color;
        }
    }

    &-expander {
        .veui-transition(transform);

        &-collapse {
            transform: rotate(180deg);
        }
    }

    & &-expander {
        .veui-icon-size(@veui-table-icon-size);
    }

    &-header-op {
        width: auto;
        margin-left: @veui-table-cell-content-spacing;
        .@{veui-prefix}-button {
            font-size: @veui-font-size-m;
        }
    }

    &-header-icon {
        margin-left: @veui-table-cell-content-spacing;
        .@{veui-prefix}-icon {
            .veui-icon-size(@veui-table-icon-size);
        }
    }

    &-cell-right &-header-icon {
        .margin(_, @veui-table-cell-content-spacing, _, 0);
    }

    &-sorter {
        .@{veui-prefix}-icon {
          margin: 0;
        }

        .@{veui-prefix}-table-sorter-icon-sort {
          opacity: 0;
        }

        .@{veui-prefix}-table-sorter-icon-asc,
        .@{veui-prefix}-table-sorter-icon-desc {
          position: absolute;
          .veui-transition(color);
        }

        .@{veui-prefix}-table-sorter-icon-asc {
            left: 6px;
        }

        .@{veui-prefix}-table-sorter-icon-desc {
            left: 0;
        }
    
        &-asc .@{veui-prefix}-table-sorter-icon-asc,
        &-desc .@{veui-prefix}-table-sorter-icon-desc {
          color: @veui-button-background-color-primary;
        }

        &.@{veui-prefix}-hover {
        }

        &-asc.@{veui-prefix}-hover .@{veui-prefix}-table-sorter-icon-asc,
        &-desc:hover .@{veui-prefix}-table-sorter-icon-desc,
        &-desc.@{veui-prefix}-hover .@{veui-prefix}-table-sorter-icon-desc {
          color: @veui-button-background-color-primary-hover;
        }
        &-asc:active .@{veui-prefix}-table-sorter-icon-asc,
        &-desc:active .@{veui-prefix}-table-sorter-icon-desc {
          color: @veui-button-background-color-primary-active;
        }
    }

    &-main,
    &-fixed-header,
    &-fixed-footer {
        width: 100%;
    }

    &-fixed-header,
    &-fixed-footer {
        position: relative;
        overflow: hidden;
        z-index: 2;
    }

    &-fixed-header {
        box-shadow: @veui-table-overflow-shadow-top;
    }

    &-fixed-footer {
        box-shadow: @veui-table-overflow-shadow-bottom;
    }

    &-hit-top &-fixed-header,
    &-hit-bottom &-fixed-footer {
        box-shadow: none;
    }

    & &-sub-row {
        td {
            background-color: @veui-table-sub-row-background-color;
        }

        &:hover {
            td {
                background-color: @veui-table-sub-row-background-color-hover;
            }
        }
    }

    &-gutter {
        thead & {
            border-left-color: @veui-table-header-background-color;
        }

        tbody &,
        tfoot & {
            border-left-color: @veui-table-cell-background-color;
        }
    }

    &-col-expand {
        width: veui-sum(
            @veui-table-icon-size-aux,
            @veui-table-cell-padding-x * 2
        );
    }

    &-bordered &-col-expand {
        width: veui-sum(
            @veui-table-icon-size-aux,
            @veui-table-cell-padding-x * 2,
            1px
        );
    }

    &-filter-custom ~ .@{veui-prefix}-option-group {
        display: none;
      }

      &-filter-actions {
        border-top: 1px solid @veui-table-filter-action-border-color;
        .padding(8px, _, 16px);

        .@{veui-prefix}-button + .@{veui-prefix}-button {
          margin-left: @veui-table-filter-action-spacing;
        }

        [ui~="m"] & {
          .padding(_, @veui-option-padding-m);
        }

        [ui~="s"] & {
          .padding(_, @veui-option-padding-s);
        }
      }

    &[ui~="xs"], &[ui~="s"] {
        font-size: @veui-table-font-size-s;
        .@{veui-prefix}-table {
            &-col-select {
                width: veui-sum(@veui-checkbox-size-s, @veui-table-cell-padding-x * 2);
            }

            &-bordered &-col-select {
                width: veui-sum(
                    @veui-checkbox-size-s,
                    @veui-table-cell-padding-x * 2,
                    1px
                );
            }

            &-cell-select {
                .@{veui-prefix}-table-cell {
                    &-content {
                        display: flex;
                        align-items: center;
                    }
                    .@{veui-prefix}-radio {
                        font-size: @veui-radio-font-size-s;
                        line-height: @veui-radio-font-size-s * @veui-line-height-m;
                        &-box {
                            .size(@veui-radio-size-s);
                            &::before {
                                .size(@veui-radio-dot-size-s);
                            }
                        }
                    }
    
                    .@{veui-prefix}-checkbox {
                        font-size: @veui-checkbox-font-size-s;
                        line-height: @veui-checkbox-font-size-s * @veui-line-height-m;
                    
                        &-box {
                          .size(@veui-checkbox-size-s);
                        }
                    }
                }
            }
        }
    }

    &[ui~="xs"] {
        td,
        tfoot th,
        thead th {
            padding-top: @veui-table-cell-padding-y-xs;
            padding-bottom: @veui-table-cell-padding-y-xs - 1;
        }
    }

    &[ui~="m"], &[ui~="l"] {
        font-size: @veui-table-font-size-m;
        .@{veui-prefix}-table {
            &-col-select {
                width: veui-sum(@veui-checkbox-size-m, @veui-table-cell-padding-x * 2);
            }

            &-bordered &-col-select {
                width: veui-sum(
                    @veui-checkbox-size-m,
                    @veui-table-cell-padding-x * 2,
                    1px
                );
            }
            &-cell-select {
                .@{veui-prefix}-table-cell {
                    &-content {
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }
    }

    &[ui~="m"] {
        td,
        tfoot th,
        thead th {
            padding-top: @veui-table-cell-padding-y-m;
            padding-bottom: @veui-table-cell-padding-y-m - 1;
        }
    }

    &[ui~="l"] {
        thead th {
            padding-top: @veui-table-cell-padding-y-m;
            padding-bottom: @veui-table-cell-padding-y-m - 1;
        }
        td,
        tfoot th {
            padding-top: @veui-table-cell-padding-y-l;
            padding-bottom: @veui-table-cell-padding-y-l - 1;
        }
    }
}