@import '../core/variables.less';
@import '../theme/index.less';

@ant-table: ant-table;
@ant-pagination: ant-pagination;

.@{ant-table} {
    .linear-gradient-background();
    .border-radius(8);
    overflow: hidden;

    &&-bordered > &-container {
        border-left-color: fade(@mi-white, 12.5%);
        backdrop-filter: blur(16px) saturate(180%);
        background: transparent;
    }

    &-content {
        & > table {
            border-top-color: fade(@mi-white, 12.5%);

            & > thead {
                .linear-gradient-background();

                & > tr > th {
                    background: transparent;
                    border-right-color: fade(@mi-white, 12.5%);
                    border-bottom-color: fade(@mi-white, 12.5%);
                    color: var(--mi-font, @mi-font);
                    font-weight: bold;

                    &.@{ant-table}-selection-column {
                        .properties(padding-left, 16);
                    }

                    &.@{ant-table}-cell-fix-right {
                        backdrop-filter: blur(48px);
                    }
                }
            }

            & > tbody {
                & > tr > td {
                    border-right-color: fade(@mi-white, 12.5%);
                    border-bottom-color: fade(@mi-white, 12.5%);
                    color: var(--mi-font, @mi-font);
                    background-color: transparent;

                    &.@{ant-table}-cell-fix-right {
                        backdrop-filter: blur(48px);
                    }

                    &.@{ant-table}-selection-column {
                        .properties(padding-left, 16);
                    }

                    &.@{ant-table}-cell-row-hover {
                        background: transparent;
                    }

                    .@{ant-table}-empty {
                        &-description {
                            color: var(--mi-font, @mi-font);
                        }
                    }
                }

                & > tr.@{ant-table}-row:hover > td {
                    background: transparent;
                }
            }
        }

        &::-webkit-scrollbar {
            .properties(height);
        }

        &::-webkit-scrollbar-thumb {
            .linear-gradient-background-theme();
        }
    }

    &-pagination.@{ant-pagination} {
        .flex();
    }

    &-tbody > tr.@{ant-table}-placeholder {
        &:hover > td {
            background: transparent;
        }

        > td {
            .ant-empty {
                .properties(padding-top, 48);
                .properties(padding-bottom, 48);
            }
        }
    }

    &-tbody > tr.@{ant-table}-row.@{ant-table}-row-selected:hover > td,
    &-tbody > tr.@{ant-table}-row-selected > td {
        background: fade(@mi-theme, 12%) !important;
    }

    &-row {
        &-indent + &-expand-icon {
            color: var(--mi-dark, @mi-dark);
        }
    }
}

.@{mi-prefix} {
    &table {
        &-btns {
            .properties(min-width, 148);
            .flex();
            
            > a,
            .@{mi-prefix}dropdown > a {
                .properties(padding-top, 4);
                .properties(padding-bottom, 4);
                .properties(padding-left);
                .properties(padding-right);
                .properties(margin-right);
                .border-radius();
                color: var(--mi-font, @mi-font);

                &:last-child {
                    margin-right: 0;
                }

                .anticon {
                    .properties(margin-right, 4);
                }
                
                &.edit {
                    background-color: var(--mi-success, @mi-success);
                }

                &.delete {
                    background-color: var(--mi-danger, @mi-danger);
                }

                &.more {
                    .properties(padding-top, 5.5);
                    .properties(padding-bottom, 5.5);
                    background-color: var(--mi-warning, @mi-warning);
                }

                &.info {
                    background-color: var(--mi-info, @mi-info);
                }

                &.edit,
                &.delete,
                &.more,
                &.info {
                    &:hover,
                    &:focus {
                        color: var(--mi-font, @mi-font);
                    }
                }
            }
        }
    }
}