.#{$ns}Table {
    position: relative;
    background: $Table-bg;
    border: $Table-borderWidth solid $Table-borderColor;
    border-radius: $Table-borderRadius;
    margin-bottom: $gap-md;

    &-fixedLeft,
    &-fixedRight {
        position: absolute;
        background: $Table-bg;
        z-index: $zindex-affix - 10;
        top: -999999px;

        &.in {
            top: auto;
        }
    }

    &-fixedLeft {
        box-shadow: $Table-fixedLeft-boxShadow;
        left: 0;
    }

    &-fixedRight {
        box-shadow: $Table-fixedRight-boxShadow;
        right: 0;
    }

    &-fixedTop {
        position: absolute;
        background: $Table-bg;
        z-index: -1;
        opacity: 0;
        box-shadow: $Table-fixedTop-boxShadow;

        &.in {
            position: fixed;
            opacity: 1;
            z-index: $zindex-affix;
        }

        > .#{$ns}Table-fixedLeft,
        > .#{$ns}Table-fixedRight {
            z-index: $zindex-affix + 10;
            // box-shadow: none;
            background: transparent;
            border-top: $Table-borderWidth solid $Table-borderColor;

            > table {
                margin-bottom: px2rem(5px);
            }
        }

        > .#{$ns}Table-wrapper {
            border-top: $Table-borderWidth solid $Table-borderColor;
        }
    }

    &-heading {
        background: $Table-heading-bg;
        border-bottom: $Table-borderWidth solid $Table-borderColor;
        padding: ($Table-heading-height - $Table-fontSize * $lineHeightBase) / 2
            $Table-toolbar-paddingX;
    }

    &--unsaved &-heading {
        background: $Table--unsaved-heading-bg;
        color: $Table--unsaved-heading-color;
    }

    &-wrapper {
        overflow: hidden;
    }

    &-placeholder {
        color: $text--muted-color;
        text-align: center;
        height: $Table-placeholder-height;
        background-color: transparent !important;

        &:hover {
            color: $text--muted-color;
            background-color: transparent !important;
        }

        > td {
            vertical-align: middle !important;
            text-align: center;
        }
    }

    &-header {
        padding: $Table-toolbar-paddingY $Table-toolbar-paddingX;

        > * + .#{$ns}Button,
        > * + .#{$ns}ButtonGroup,
        > * + .#{$ns}ButtonToolbar {
            margin-left: $Crud-toolbar-gap;
        }
    }

    &-toolbar {
        @include clearfix();
        display: flex;
        padding: $Table-toolbar-paddingY $Table-toolbar-paddingX;
    }

    &-header + &-toolbar {
        padding-top: 0;
    }

    &-contentWrap {
        position: relative;
    }

    &-header + &-contentWrap,
    &-toolbar + &-contentWrap {
        border-top: $Table-borderWidth solid $Table-borderColor;
    }

    &-footToolbar {
        border-top: $Table-borderWidth solid $Table-borderColor;
    }

    &-actions {
        display: inline-block;

        > * {
            margin-right: $Crud-toolbar-gap;
        }
    }

    &-content {
        min-height: 0.01%;
        overflow-x: auto;
    }

    &-table {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
        font-size: $Table-fontSize;
        color: $Table-color;
        background-color: $Table-bg;

        > thead > tr {
            background-color: $Table-thead-bg;

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

                padding: $TableCell-paddingY $TableCell-paddingX;

                &:first-child {
                    padding-left: $TableCell--edge-paddingX;
                }

                &:last-child {
                    padding-right: $TableCell--edge-paddingX;
                }

                &:not(:last-child) {
                    border-right: $Table-thead-borderWidth solid
                        $Table-thead-borderColor;
                }

                font-size: $Table-thead-fontSize;
                color: $Table-thead-color;
                font-weight: $fontWeightNormal;
                white-space: nowrap;

                .#{$ns}Remark {
                    margin-left: $gap-xs;
                }
            }
        }

        > thead > tr + tr {
            border-top: $Table-borderWidth solid $Table-borderColor;
        }

        > tbody > tr {
            border-top: $Table-borderWidth solid $Table-borderColor;

            > td {
                padding: $TableCell-paddingY $TableCell-paddingX;
                vertical-align: top;

                &:first-child {
                    padding-left: $TableCell--edge-paddingX;
                }

                &:last-child {
                    padding-right: $TableCell--edge-paddingX;
                }
            }

            @if $Table-strip-bg !=transparent {
                background-color: transparent;

                &.#{$ns}Table-tr--odd {
                    background-color: $Table-strip-bg;
                }
            }

            &:hover,
            &.is-hovered {
                background-color: $Table-onHover-bg;
                border-color: $Table-onHover-borderColor;
                color: $Table-onHover-color;

                & + tr {
                    border-color: $Table-onHover-borderColor;
                }
            }

            &.is-checked {
                background-color: $Table-onChecked-bg;
                border-color: $Table-onChecked-borderColor;
                color: $Table-onChecked-color;

                & + tr {
                    border-color: $Table-onChecked-borderColor;
                }

                &:hover,
                &.is-hovered {
                    background-color: $Table-onChecked-onHover-bg;
                    border-color: $Table-onChecked-onHover-borderColor;
                    color: $Table-onChecked-onHover-color;

                    & + tr {
                        border-color: $Table-onChecked-onHover-borderColor;
                    }
                }
            }

            &.is-moved,
            &.is-modified {
                background-color: $Table-onModified-bg;
                border-color: $Table-onModified-borderColor;
                color: $Table-onModified-color;

                & + tr {
                    border-color: $Table-onModified-borderColor;
                }

                &:hover,
                &.is-hovered {
                    background-color: $Table-onModified-onHover-bg;
                    border-color: $Table-onModified-onHover-borderColor;
                    color: $Table-onModified-onHover-color;

                    & + tr {
                        border-color: $Table-onModified-onHover-borderColor;
                    }
                }
            }

            &.is-dragging {
                opacity: $Table-onDragging-opacity;
            }
        }

        @for $i from 2 through 10 {
            tr.#{$ns}Table-tr--#{$i}th {
                .#{$ns}Table-expandCell > button {
                    position: relative;
                    right: -20px * ($i - 1);
                }

                .#{$ns}Table-expandCell + td {
                    > div,
                    > span {
                        margin-left: 20px * ($i - 1);
                    }
                }
            }
        }

        > thead > tr > th.#{$ns}Table-checkCell,
        > tbody > tr > td.#{$ns}Table-checkCell {
            border-right: 0;
            width: px2rem(1px);

            .#{$ns}Checkbox {
                margin: 0;
            }
        }

        > thead > tr > th.#{$ns}TableCell--sortable {
            padding-right: $TableCell-paddingX + $TableCell-sortBtn-width;
            position: relative;
        }

        > thead > tr > th.#{$ns}TableCell--searchable {
            padding-right: $TableCell-paddingX + $TableCell-searchBtn-width;
            position: relative;
        }

        > thead > tr > th.#{$ns}TableCell--filterable {
            padding-right: $TableCell-paddingX + $TableCell-filterBtn-width;
            position: relative;
        }

        &--withCombine {
            > thead > tr > th,
            > tbody > tr > td {
                &:first-child {
                    padding-left: $TableCell-paddingX;
                }

                &:last-child {
                    padding-right: $TableCell-paddingX;
                }
            }

            // reset
            > tbody > tr {
                @if $Table-strip-bg !=transparent {
                    &.#{$ns}Table-tr--odd {
                        background-color: transparent;
                    }
                }

                &:hover {
                    background-color: transparent;
                }

                > td {
                    vertical-align: middle;
                }

                > td:not(:last-child) {
                    border-right: $Table-borderWidth solid $Table-borderColor;
                }
            }
        }
    }

    &Cell-sortBtn {
        cursor: pointer;
        width: $TableCell-sortBtn-width;
        position: absolute;
        right: $TableCell-paddingX - $TableCell-sortBtn-width / 2;
        color: $Table-thead-iconColor;

        &--up:before {
            display: inline-block;
            content: $TableCell-sortBtn--up-icon;
            font-family: $TableCell-sortBtn--up-iconVendor;
        }

        &--down:before {
            display: inline-block;
            content: $TableCell-sortBtn--down-icon;
            font-family: $TableCell-sortBtn--down-iconVendor;
        }

        &--default:before {
            display: inline-block;
            content: $TableCell-sortBtn--default-icon;
            font-family: $TableCell-sortBtn--default-iconVendor;
        }

        &--up,
        &--down {
            display: none;
            position: relative;
            z-index: 2;
            font-style: normal;

            &.is-active {
                display: inline-block;
            }
        }

        &--default {
            font-style: normal;
            position: absolute;
            z-index: 1;
            display: inline-block;
            opacity: $TableCell-sortBtn--default-opacity;
            top: 0;
            left: 0;

            &.is-active {
                opacity: $TableCell-sortBtn--default-onActive-opacity;
            }
        }
    }

    &Cell-searchBtn {
        cursor: pointer;
        width: $TableCell-searchBtn-width;
        position: absolute;
        right: $TableCell-paddingX - $TableCell-searchBtn-width / 2;
        color: $text--muted-color;

        &:hover {
            color: $text-color;
        }
    }

    &Cell-searchPopOver {
        border: none;
        min-width: px2rem(320px);
        max-width: px2rem(640px);

        .#{$ns}Panel {
            margin: 0;
        }
    }

    &Cell-filterBtn {
        cursor: pointer;
        width: $TableCell-filterBtn-width;
        position: absolute;
        right: $TableCell-paddingX - $TableCell-filterBtn-width / 2;
        color: $text--muted-color;

        &:hover {
            color: $text-color;
        }

        .#{$ns}Remark {
            display: inline;
        }
    }

    &Cell-filterPopOver {
        border: none;
        min-width: px2rem(320px);
        max-width: px2rem(640px);

        .#{$ns}DropDown-menu {
            margin: 0;
            padding: 0;
            border-radius: 0;

            .#{$ns}DropDown-divider {
                height: $TableCell-filterPopOver-dropDownItem-height;
                line-height: $TableCell-filterPopOver-dropDownItem-height;
                padding: $TableCell-filterPopOver-dropDownItem-padding;
                background-color: $white;
                margin: 0;

                &:hover {
                    background-color: $light;
                    color: $primary;
                }

                &.is-selected {
                    background-color: $light;
                    color: $primary;
                }

                .#{$ns}Checkbox {
                    width: 100%;
                    margin: 0;
                }
            }
        }
    }

    &-itemActions-wrap {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        min-height: 30px;
        pointer-events: none;
        box-shadow: $Table-onHover-boxShadow;
    }

    &-itemActions {
        pointer-events: all;
        position: absolute;
        // background: $Table-onHover-bg;
        background: linear-gradient(
            90deg,
            rgba($Table-onHover-bg, 0) 0%,
            rgba($Table-onHover-bg, 1) 20%,
            rgba($Table-onHover-bg, 1) 100%
        );
        top: $Table-borderWidth;
        bottom: 0;
        right: 0;
        padding-left: px2rem(50px);
        padding-right: $TableCell-paddingX;
        display: flex;
        align-items: center;

        a {
            cursor: pointer;
            padding: $gap-xs $gap-sm;
            color: $link-color;
            text-decoration: $link-decoration;

            &:hover {
                color: $link-onHover-color;
                text-decoration: $link-onHover-decoration;
            }

            &.is-disabled {
                pointer-events: none;
                opacity: $Button-onDisabled-opacity;
                color: $text--muted-color;
            }
        }
    }

    &-dragTip {
        color: $text--loud-color;
        clear: both;
        margin-top: $gap-xs;
    }

    &-footTable {
        position: relative;
        width: 100%;
        border-spacing: 0;
        border-collapse: collapse;
        margin-bottom: 0;
        background: transparent;

        > tbody > tr > th {
            width: px2rem(120px);
            text-align: right;
            padding: $TableCell-paddingY $TableCell-paddingX;
        }

        > tbody > tr > td {
            word-break: break-all;
            padding: $TableCell-paddingY $TableCell-paddingX;
        }

        > tbody > tr:not(:first-child) {
            border-top: $Table-borderWidth solid
                lighten($Table-thead-borderColor, 2.5%);
        }
    }
}

.#{$ns}OperationField {
    margin: px2rem(-3px);

    > .#{$ns}Button {
        margin: px2rem(3px);
    }
}