$table-prefix-cls: fry-table;
$border-width: 1px;
$TablefixedZIndex: 2;
$TableBorderBottomZIndex: 3;
$TableLoadingMaskZIndex: 1000;

.#{$table-prefix-cls} {
    position: relative;
    overflow: hidden; 
    display: flex;
    flex-direction: column;

    &::after {
        content: '';
        display: block;
        background-color: $borderColor;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: $border-width;
        z-index: $TableBorderBottomZIndex;
    }

    table {
        table-layout: fixed;
        width: 100%;
        font-size: 14px;

        // border-collapse: collapse; 换成以下是因为固定列使用position: sticky后边框不跟着移动
        border-spacing: 0px;

        tr {
            background: white;
        }


    }







    &-loading-mask {
        position: absolute;
        top: 0;
        left: 0;
        z-index: $TableLoadingMaskZIndex;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, .9);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &-column {
        padding: 8px 0;
        text-align: left;
        border-top: $border-width solid $borderColor;

        &-fixed {
            position: sticky;
            z-index: $TablefixedZIndex;
            background: white;
        }

        &-border {

            border-right: $border-width solid $borderColor;

            &:nth-child(1) {
                border-left: $border-width solid $borderColor;
            }
        }

        &-align {
            &-center {
                text-align: center;
            }

            &-left {
                text-align: left;
            }

            &-right {
                text-align: right;
            }
        }
    }

    $cellPadding: 18px;

    &-cell {
        padding: 0 $cellPadding;
    }

    .#{$table-prefix-cls}-row {
        &-hover {
            td {
                background: #ebf7ff;
            }
        }

        &-tree-button {
            user-select: none;
            margin-right: 4px;
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 1px solid $borderColor;
            border-radius: 2px;
            background-color: #fff;
            line-height: 12px;
            cursor: pointer;
            vertical-align: middle;
            text-align: center;

            &:hover {
                border-color: $primaryColor
            }
        }

        @for $i from 1 through 10 {
            .#{$table-prefix-cls}-tree-cell-#{$i} {
                padding-left: calc($i * 16px + 4px + $cellPadding);

            }
        }

    }

    &-empty {
        tr {
            height: 40px;
        }

        td {
            text-align: center
        }
    }

    &-is-last-left-fixed-column,
    &-is-first-right-fixed-column {
        &::before {
            content: "";
            position: absolute;
            top: 0px;
            bottom: 0;
            width: 10px;
        }

    }

    &-is-last-left-fixed-column {
        border-right: none;

        &::before {
            right: -10px;
            box-shadow: inset 10px 0 10px -10px rgba(0, 0, 0, .15);
        }

    }

    &-is-first-right-fixed-column {
        &::before {
            left: -10px;
            box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, .15);
        }

    }

    &-footer {
        margin-top: auto
    }

}

@import "./header.scss";