@import '~antd/es/table/style/index.less';
@import '~antd/es/style/mixins/clearfix.less';
@import '../variable.less';

@table-prefix-cls: ~'@{ant-prefix}-table';
@pagination-prefix-cls: ~'@{ant-prefix}-pagination';
@select-prefix-cls: ~'@{ant-prefix}-select';
@icon-prefix-cls: ~'@{ant-prefix}-icon';
@menu-prefix-cls: ~'@{ant-prefix}-menu';
@button-prefix-cls: ~'@{ant-prefix}-btn';
@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox';
@tag-prefix-cls: ~'@{ant-prefix}-tag';
@empty-prefix-cls: ~'@{ant-prefix}-empty';

.@{table-prefix-cls}-cell {
  height: @table-cell-height;
}

.@{table-prefix-cls}-cell {
  height: @table-cell-height;
}

.@{table-prefix-cls}-cell {
  height: @table-cell-height;
}

.@{table-prefix-cls}-customize-wrapper {
  .clearfix;
}

.@{table-prefix-cls} {
  z-index: 1;
  &-filter-trigger-container-open {
    svg {
      fill: @primary-color-active;
    }
  }
}

.@{table-prefix-cls}-row-expand-icon-cell {
  > span > .@{iconfont-css-prefix} {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: @icon-color-base;

    &:hover svg {
      fill: @primary-color;
    }
  }
}

.@{table-prefix-cls}-wrapper {
  // select arrow icon
  .@{pagination-prefix-cls}-options {
    .@{select-prefix-cls}-arrow {
      right: 5px;
      margin-top: -6px !important;
    }
  }

  .@{pagination-prefix-cls}-total-text {
    position: absolute;
    left: 0;
  }
}

.@{table-prefix-cls}-locale {
  padding: 32px;
  color: #7f7f7f !important;

  svg {
    width: 72px;
    height: 72px;
    margin-bottom: 12px;
  }
}
.@{empty-prefix-cls}-search.@{table-prefix-cls}-locale {
  color: #111 !important;
}

.@{table-prefix-cls}-with-operations {
  position: relative;

  .@{table-prefix-cls}-operations {
    text-align: right;
    margin-bottom: 12px;

    > div,
    > a {
      vertical-align: bottom;
    }

    &-absolute {
      position: absolute;
      top: -46px;
      right: 0;
    }
  }

  .@{table-prefix-cls}-operation {
    display: inline-block;
    cursor: pointer;
    width: 34px;
    height: 34px;
    padding: 6px;
    border: 1px solid @border-color-base;
    margin-left: 4px;
  }
}

.@{table-prefix-cls}-thead {
  .ant-checkbox-checked .ant-checkbox-inner {
    background-color: @primary-color;
    border: 0;
  }

  .ant-checkbox-inner {
    border-radius: 0;
  }

  .ant-checkbox-indeterminate .ant-checkbox-inner::after {
    background-color: @primary-color;
  }

  .ant-checkbox:hover .ant-checkbox-inner {
    border-color: @primary-color;
  }

  .ant-checkbox-wrapper:hover .ant-checkbox-inner {
    border-color: @primary-color;
  }
}

.@{table-prefix-cls}-operation-overlay {
  margin-top: 12px;
  background-color: #fff;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);

  &-title {
    padding: 13px 20px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;

    .@{icon-prefix-cls} {
      cursor: pointer;
    }
  }
  &-content {
    padding: 32px;
    padding-bottom: 14px;

    .@{checkbox-prefix-cls}-group {
      width: 100%;
    }
  }

  &-wrap {
    position: relative;
    z-index: 1 !important;

    &::after {
      position: absolute;
      content: '';
      width: 8.5px;
      height: 8.5px;
      box-shadow: rgba(0, 0, 0, 0.06) -2px -2px 5px;
      right: 13px;
      top: 8px;
      border-color: rgb(255, 255, 255) transparent transparent
        rgb(255, 255, 255);
      background: transparent;
      border-style: solid;
      border-width: 4.24264px;
      transform: rotate(45deg);
    }
  }
}

.@{table-prefix-cls}-filter-icon {
  &-active svg {
    fill: @primary-color;
  }
}

.@{table-prefix-cls}-filter-column {
  .ant-dropdown {
    top: 0 !important;
    z-index: 1;

    &-hidden {
      display: none;
    }
  }

  .@{table-prefix-cls}-filter-trigger {
    z-index: 10;
    .@{icon-prefix-cls}-filter + div {
      top: 50px !important;
    }
  }

  .@{table-prefix-cls}-filter-dropdown {
    background-color: #fff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);

    &-menu {
      &-wrap {
        .@{menu-prefix-cls} {
          max-height: 180px;
          overflow-y: scroll;
          overflow-x: hidden;
          &-item,
          &-submenu {
            padding: 0 15px;
            font-weight: 400;
            height: 36px;
            line-height: 36px;

            .@{checkbox-prefix-cls} {
              &-wrapper {
                width: 100%;

                > span {
                  vertical-align: middle;
                }
              }
            }

            &-active {
              background-color: #f9f9f9;
            }
          }
          .@{menu-prefix-cls}-submenu-title {
            height: 36px;
            line-height: 36px;
            padding: 0;
          }
          .@{menu-prefix-cls}-submenu-arrow {
            display: none;
          }
          .@{menu-prefix-cls}-submenu-active {
            .@{menu-prefix-cls}-submenu-title:hover {
              color: @text-color;
            }
            color: @text-color;
          }

          &:not(.@{menu-prefix-cls}-horizontal)
            .@{menu-prefix-cls}-item-selected {
            background-color: #f9f9f9;
          }
        }
        .@{menu-prefix-cls}-vertical,
        .@{menu-prefix-cls}-vertical-left {
          border-right: 0;
        }
      }

      &-btn-wrap {
        padding: 0 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid @border-color-split;

        .@{button-prefix-cls} {
          &-link {
            padding: 0;
            margin-right: 20px;
          }

          &-primary {
            width: 46px;
            padding: 0 8px;
          }
        }
      }

      &-item {
        &-small {
          width: 120px;
        }
        &-middle {
          width: 160px;
        }
        &-large {
          width: 200px;
        }
      }
    }
  }
}

.@{menu-prefix-cls} {
  &-item,
  &-submenu {
    .@{menu-prefix-cls}:not(.@{menu-prefix-cls}-horizontal)
      .@{menu-prefix-cls}-item-selected {
      background-color: #f9f9f9;
    }
  }

  &-submenu {
    .@{menu-prefix-cls}-vertical > .@{menu-prefix-cls}-item {
      padding: 0 15px;
      font-weight: 400;
      height: 36px;
      line-height: 36px;

      .@{checkbox-prefix-cls} {
        &-wrapper {
          width: 100%;

          > span {
            vertical-align: middle;
          }
        }
      }

      &-active {
        background-color: #f9f9f9;
      }
    }
  }
  &-vertical,
  &-vertical-left {
    border-right: 0;
  }
}

.@{table-prefix-cls}-filter-labels {
  &-wrap {
    margin-top: -3px;
    padding-bottom: 9px;
    text-align: left;
    font-size: 12px;

    span {
      vertical-align: middle;
    }

    .@{tag-prefix-cls} {
      overflow: hidden;
      border: 1px solid @border-color-split;
      margin: 3px 12px 3px 0;

      > div {
        vertical-align: middle;
        display: inline-block;
        max-width: 209px;
        overflow: hidden;
      }
    }
  }
}