@import './variables.scss';
@import '~@alifd/next/lib/core/index-noreset';
@import '~@alifd/next/lib/table/scss/variable';
@import '~@alifd/next/lib/button/scss/variable'; // next button variables
@import '~@alifd/next/lib/button/scss/mixin';

body {
  .just-to-get-scrollbar-size::-webkit-scrollbar {
    width: $b-design-table-scrollbar-thumb-width;
    height: $b-design-table-scrollbar-thumb-height;
  }

  .just-to-get-scrollbar-size::-webkit-scrollbar-thumb {
    background-color: $b-design-table-scrollbar-thumb-bg-color;
    border-radius: 100px;
  }
}

#{$table-prefix} {
  border-top: none;
  border-left: none;
  .#{$css-prefix}table-inner table {
    th,
    td {
      font-size: 12px;
    }
  }

  //展开下拉icon的方向替换
  td &-cell-wrapper {
    .#{$css-prefix}icon-arrow-down.#{$css-prefix}table-tree-arrow[aria-expanded='true'],
    .#{$css-prefix}icon-arrow-right.#{$css-prefix}table-tree-arrow[aria-expanded='true'],
    .#{$css-prefix}table-tree-placeholder[aria-expanded='true'] {
      transform: rotate(180deg);
    }

    #{$table-prefix}-expanded-ctrl {
      width: $b-design-table-expanded-ctrl-size;
      height: $b-design-table-expanded-ctrl-size;

      .#{$css-prefix}icon {
        width: $b-design-table-expanded-ctrl-size;
        height: $b-design-table-expanded-ctrl-size;
        border: 1px $color-fill1-5 solid;
        border-radius: 2px;
        line-height: calc(#{$b-design-table-expanded-ctrl-size} - 2px);

        &:before {
          height: calc(#{$b-design-table-expanded-ctrl-size} - 2px);
          color: $color-fill1-5;
        }
      }
    }
  }

  /*
  // 有rowspan和colspan的情况下此规则不适用
  &-header th:last-child {
    border-right: none;
  }
  */
  &.#{$css-prefix}xs {
    th {
      #{$table-prefix}-cell-wrapper {
        padding: $b-design-table-size-xs-header-padding-top
          $table-size-s-header-padding-left;
      }
    }

    td {
      #{$table-prefix}-cell-wrapper {
        padding: $b-design-table-size-xs-header-padding-top
          $table-size-s-cell-padding-left;
      }
    }

    #{$table-prefix}-prerow #{$table-prefix}-cell-wrapper {
      padding: $b-design-table-size-xs-header-padding-top $s-2;
    }
  }

  &.#{$css-prefix}large {
    th {
      #{$table-prefix}-cell-wrapper {
        padding: $b-design-table-size-large-header-padding-top
          $table-size-s-header-padding-left;
      }
    }

    td {
      #{$table-prefix}-cell-wrapper {
        padding: $b-design-table-size-large-header-padding-top
          $table-size-s-cell-padding-left;
      }
    }

    #{$table-prefix}-prerow #{$table-prefix}-cell-wrapper {
      padding: $b-design-table-size-large-header-padding-top $s-2;
    }
  }

  &-header-inner {
    .#{$css-prefix}table-selection {
      .#{$css-prefix}btn {
        padding: 0;
        background-color: transparent !important;
      }
    }
  }

  &-body::-webkit-scrollbar {
    width: $b-design-table-scrollbar-thumb-width;
    height: $b-design-table-scrollbar-thumb-height;
  }

  &-body::-webkit-scrollbar-thumb {
    background-color: $b-design-table-scrollbar-thumb-bg-color;
    border-radius: 100px;
  }

  &-body {
    #{$table-prefix}-expanded-row {
      // background: $b-design-table-expanded-row-bg-color;
      &:hover {
        background: $table-row-hover-bg;
      }
    }

    #{$table-prefix}-row {
      // &.hovered {
      //   transform: $b-design-table-row-transform;
      //   box-shadow: $b-design-table-row-box-shadow;
      // }
      // td:last-child {
      //   border-right: none;
      // }
    }
  }

  &.only-bottom-border {
    #{$table-prefix}-selection#{$table-prefix}-prerow {
      #{$table-prefix}-cell-wrapper {
        padding-right: 0px;
      }
    }
  }
}

.#{$css-prefix}table-filter-menu {
  margin-top: 8px;

  .#{$css-prefix}menu-content {
    &::-webkit-scrollbar-thumb {
      background-color: $color-fill1-3;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
    }

    &:hover::-webkit-scrollbar-thumb {
      background-color: $color-fill1-3;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
    }

    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
      background-color: white;
    }

    &::-webkit-scrollbar-track {
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
    }
  }

  .#{$css-prefix}menu-footer {
    float: right;

    .#{$css-prefix}btn {
      @include next-button-size(
        $btn-size-s-padding,
        $btn-size-s-height,
        $btn-size-s-font,
        $btn-size-s-border-width,
        $btn-size-s-corner,
        $btn-size-s-icon-margin,
        $btn-size-s-icon-size,
        $btn-size-s-icon-split-size
      );
      padding: 0 $btn-size-s-padding !important;
    }

    .#{$css-prefix}btn:last-child {
      margin-right: 0px;
    }
  }
}