@import './token.less';

@zindex-affix: 900;
@zindex-top: 3000;

.@{ns}-Table {
  position: relative;
  border-radius: @Table-borderRadius;
  padding-bottom: @gap-sm;

  .@{ns}-Form-control > & {
    margin-bottom: @gap-sm;
  }

  // 做一屏显示用
  &-box{
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    // 高级筛选
    .@{ns}-FilterCards{
      flex-grow: 1;
      flex-shrink: 0;

    }

    // 表格容器
    .@{ns}-Table-viewPort{
      flex-shrink: 1;
      flex-grow: 1;
      height: auto;
      // height: 0;// 兼容safari
    }
  }

  &-heading {
    background: @Table-heading-bg;
    padding: calc(
        (@Table-heading-height - @Table-fontSize * @line-height-base) / 2

      )
      var(--@gap-sm)
  }

  &--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: transparent !important;

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

    > td {
      border-bottom-width: 0 !important;
      vertical-align: middle !important;
      text-align: center;
    }
  }

  &-searchableForm {
    background: @Table-searchableForm-backgroundColor;
    border-radius: @Table-searchableForm-borderRadius;

    &-footer {
      padding: @gap-sm @gap-base;
      clear: both;
    }

    &-checkbox {
      & > div > .@{ns}-CheckboxControl {
        padding-top: 0;
      }
    }
  }

  &-header {
    padding: @Table-toolbar-marginY @Table-toolbar-marginX;

    > * + .@{ns}-Button,
    > * + .@{ns}-ButtonGroup,
    > * + .@{ns}-ButtonToolbar {
      margin-left: @gap-xs;
    }

    &-action{
      flex-basis: 0;
      flex-grow: 1;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: @gap-sm 0;

      &--left {
        flex-shrink: 0;
        display: flex;
        align-items: center;
      }

      &--right {
        flex-grow: 1;
        flex-shrink: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: @gap-sm 0;
        flex-wrap: wrap;
        max-width: 100%;
        // .#{$ns}Form-item{
        //   margin-bottom: 0 !important;
        //   margin-right: calc(var(--Form-item-gap) / 2) !important;
        // }
      }

      &-item + &-item{
        margin-left: 6px;
      }
    }

    // &-control-btn{
    //   display: flex;
    //   border: @Form-input-borderWidth solid @Form-input-borderColor;
    //   span{
    //     display: flex;
    //     align-items: center;
    //     justify-content: center;
    //     width: 26px;
    //     height: 26px;
    //     cursor: pointer;
    //     color: #6c757d;

    //     svg{
    //       width: 13px;
    //       height: 13px;
    //       path{
    //         fill: currentColor;
    //       }
    //     }
    //     &:hover{
    //       background-color: var(--color-fill-3);
    //       color: var(--primary-color);
    //     }
    //   }

    //   &-search{
    //     width: 60px !important;
    //     color: @Button--primary-color !important;
    //     svg{
    //       width: 11px !important;
    //       height: 11px !important;
    //       margin-right: 5px;
    //     }
    //   }
    //   span:not(:last-child){
    //     border-right: @Form-input-borderWidth solid @Form-input-borderColor;
    //   }
    // }
  }

  &-toolbar, &-action {
    // @include clearfix();
    display: flex;
    margin: 0 @Table-toolbar-marginX @Table-toolbar-marginY 0;
    flex-wrap: wrap;

    .@{ns}-DropDown {
      &-menuItem {
        height: auto;

        .@{ns}-Checkbox {
          display: flex;
          align-items: center;
        }
      }
    }
  }

  &-toolbar{
    &-box{
      margin-left: calc(@gap-xs * -1);
      // margin-top: calc(@gap-xs * -1);
      flex-basis: 0;
      flex-grow: 1;
      .clearfix();
    }

    &-item{
      margin-left: @gap-xs;
      line-height: @line-height-base;
      height: 30px;
      vertical-align: middle;

      &--left {
        float: left;
      }

      &--right {
        float: right;
      }
    }

  }

  &-action{
    margin: 0 @Table-toolbar-marginX @Table-action-marginY 0;
  }

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

  &-viewPort{
    position: relative;
    overflow-y: hidden;

    &-full{
      min-width: 0;
      height: auto;
      min-height: 0;
      display: flex;
      flex-direction: row;
      // border-top: @Table-thead-borderWidth solid var(--color-border);

      .@{ns}-Table-viewPort-left{
        flex: 1 1 auto;

        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;

        overflow: hidden;
      }
      .@{ns}-Table-viewPort-right{
        position: relative;
        flex-shrink: 0;
      }

      // // 窄详情
      // &.@{ns}-Table-viewPort-narrow-detail{
      //   .@{ns}-Table-viewPort-left{
      //     flex: 1 1 auto;
      //     height: auto;
      //     min-height: 0;
      //   }
      //   .@{ns}-Table-viewPort-right{
      //     flex: 0 0 460px;
      //     max-width: 460px;
      //     min-width: 460px;
      //     border-left: 5px solid #e8e8e8;
      //   }
      // }

      // // 宽详情
      // &.@{ns}-Table-viewPort-wide-detail{
      //   .@{ns}-Table-viewPort-left{
      //     flex: 1 1 28%;
      //     min-width: 320px;
      //     max-width: 500px;
      //     border-right: 5px solid #e8e8e8;
      //   }
      //   .@{ns}-Table-viewPort-right{
      //     position: relative;
      //     min-width: 0;
      //     flex: 1 1 72%;
      //   }
      // }
    }
  }


  &-contentWrap {
    position: relative;
    margin-bottom: @Table-action-marginY;
    &.mb_0{
      margin-bottom: 0;
    }
  }

  &-actions {
    display: inline-block;

    > * {
      margin-right: @gap-xs;
    }
  }

  &-content {
    min-height: 0.01%;
    overflow-x: auto;
    overflow-y: hidden;
    transform: translateZ(0);
    border: @Table-borderWidth solid @Table-borderColor;

    th {
      position: relative;
    }
  }


  // 表格
  &-table {
    table-layout: fixed;
    width: 100%;
    min-width: 100%;
    margin-bottom: 0;
    // font-size: @Table-fontSize;
    color: @Table-color;
    // background: @Table-bg;
    border-spacing: 0;
    // border-collapse: separate;// 解决sticky导致border丢失
    border-collapse: collapse;

    & th,
    & td {
      text-align: left;
      word-break: break-all;
    }

    & th.text-center,
    & td.text-center,
    & th[colspan],
    & td[colspan] {
      text-align: center;
    }

    & th.text-right,
    & td.text-right {
      text-align: right;
    }


    &--checkOnItemClick {
      > tbody > tr {
        cursor: pointer;
      }
    }
    &--checkOnItemActive {
      > tbody > tr {
        cursor: pointer;

        &.is-actived {
          position: relative;
          background: @Table-onChecked-bg !important;

          td[data-fixed='right'], td[data-fixed='left'] {
            background: @Table-onChecked-bg !important;
          }

          [data-fixed='left']{
            &[data-side='true']{
              border-right: 1px solid @Table-onChecked-bg;
            }
          }


          &:not(.is-safari)::after{
            position: absolute;
            content: '';
            left: 0;
            width: 2px;
            height: 100%;
            display: inline-block;
            background-color: var(--primary-color);
            z-index: 11;
          }
        }
        &.is-diff-add {
          position: relative;
          background: @diff-bg-add !important;

          td[data-fixed='right'], td[data-fixed='left'] {
            background: @diff-bg-add !important;
          }
        }
        &.is-diff-edit {
          position: relative;
          background: @diff-bg-edit !important;

          td[data-fixed='right'], td[data-fixed='left'] {
            background: @diff-bg-edit !important;
          }
        }
        &.is-diff-del {
          position: relative;
          background: @diff-bg-del !important;

          td[data-fixed='right'], td[data-fixed='left'] {
            background: @diff-bg-del !important;
          }
        }
      }
    }

    &--group {
      > tbody > tr:not(.@{ns}-Table-group-tr) {
        td:first-child{
          padding-left: 30px;
        }
      }
    }


    > thead > tr {

      > th {
        background: var(--color-fill-1);
        border-bottom: 1px  solid var(--color-border);

        .@{ns}-TableCell--th{
          padding: @TableCell-paddingY @TableCell-paddingX;

          .@{ns}-TableCell--title{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            span{
            vertical-align: middle;  
            }
            &-check{
              margin-right: 4px;
              vertical-align: middle;
            }
          }
        }

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

        &:last-child {
          // padding-right: @TableCell--edge-paddingX;
          .@{ns}-Table-content-colDragLine {
            // 避免出现横向滚动条
            width: 4px;
            right: 0;
          }
        }

        &:not(:last-child) {
          border-right: @Table-thead-borderWidth solid var(--color-border);
          transition: border-right .3s;

        }


        font-size: @Table-thead-fontSize;
        color: @Table-thead-color;
        font-weight: @font-weight-normal;
        white-space: nowrap;

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

    > tbody > tr {
      position: relative;
      > td {
        padding: @TableCell-paddingY @TableCell-paddingX;
        border-bottom: @Table-borderWidth solid @Table-borderColor;

        .@{ns}-Table-cell{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &-icon_con{
            display: inline-flex;
            align-items: center;
            width: 100%;
            .colIcon-before{
              margin-right: @size-1;
            }
            .colIcon-after{
              margin-left: @size-1;
            }

          }
          &.@{ns}-Table-cell-drag{
            color: #33333370;
            cursor: move;
          }

          &.link-btn * {
            color: var(--primary) !important;
            cursor: pointer;
            &:hover {
              color: var(--primary-5) !important;
              text-decoration: underline;
            }
          }
        }

        &[data-type='btn']{
          padding: 4px @TableCell-paddingX;
        }
      }

      &.@{ns}-Table-tr--hasItemAction:hover {
        cursor: pointer;
      }

      &:hover{
        background: @Table-onHover-bg;
        color: @Table-onHover-color;

        td[data-fixed='right'], td[data-fixed='left'] {
          background: @Table-onHover-bg;
          color: @Table-onHover-color;
        }

        &.@{ns}-Table-group-tr{
          color: var(--primary-color);
        }
      }

      &.is-checked {
        position: relative;
        background: @Table-onChecked-bg !important;


        td[data-fixed='right'], td[data-fixed='left'] {
          background: @Table-onChecked-bg !important;
        }

        [data-fixed='left']{
          &[data-side='true']{
            border-right: 1px solid @Table-onChecked-bg;
          }
        }
      }

      &.is-diff-add {
        position: relative;
        background: @diff-bg-add !important;

        td[data-fixed='right'], td[data-fixed='left'] {
          background: @diff-bg-add !important;
        }
      }
      &.is-diff-edit {
        position: relative;
        background: @diff-bg-edit !important;

        td[data-fixed='right'], td[data-fixed='left'] {
          background: @diff-bg-edit !important;
        }
      }
      &.is-diff-del {
        position: relative;
        background: @diff-bg-del !important;

        td[data-fixed='right'], td[data-fixed='left'] {
          background: @diff-bg-del !important;
        }
      }

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

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

      &.is-summary {
        background: @Table-thead-bg;
        color: @Table-thead-color;
        font-weight: @font-weight-normal;
      }

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

      &.@{ns}-Table-group-tr{
        cursor: pointer;

        td{
          padding-left: 0;
          text-align: left;

          &>span{
            position: sticky;
            display: inline-block;
            z-index: 10;
            left: 0;
            padding-left: 8px;

            .pd-Icon{
              margin-right: 6px;
              width: 13px;
              height: 13px;
              font-size: 13px;
            }

            label{
              color: #6c757d;
              font-size: 12px;
            }

          }
        }
      }
    }


    > thead > tr > th.@{ns}-Table-checkCell,
    > tbody > tr > td.@{ns}-Table-checkCell {
      border-right: 0;
      width: 1px;
      padding: @TableCell-paddingY @TableCell-paddingX;
      white-space: nowrap;

      .@{ns}-Checkbox {
        margin: 0;
      }
    }

    > thead > tr > th.@{ns}-Table-expandCell,
    > tbody > tr > td.@{ns}-Table-expandCell {
      border-right: 0;
      width: 1px;
      padding-right: 0;
    }

    > thead > tr > th.@{ns}-Table-dragCell,
    > tbody > tr > td.@{ns}-Table-dragCell {
      border-right: 0;
      width: 1px;
      padding-right: 0;
      cursor: move;
      > svg {
        vertical-align: middle;
      }
    }

    > tbody > tr > td.@{ns}-Table-expandCell {
      position: relative;

    }

    > tbody > tr.is-expanded > td.@{ns}-Table-expandCell {

      &::before {
        content: '';
        position: absolute;
        width: 1px;
        top: 50%;
        bottom: 0;
        right: 7px;
        height: auto;
        background: @Table-tree-borderColor;
      }
    }

    > thead > tr > th > div.th{
      position: relative;
    }

    > thead > tr > th .@{ns}-TableCell--sortable {
      padding-right: calc(
        @TableCell-paddingX + @TableCell-sortBtn-width
      );
    }

    > thead > tr > th .@{ns}-TableCell--searchable {
      padding-right: calc(
        @TableCell-paddingX + @TableCell-searchBtn-width
      );
    }


    // 过滤和排序共存 需要特殊处理
    > thead > tr > th .@{ns}-TableCell--filterable {
      padding-right: calc(
        @TableCell-paddingX + @TableCell-filterBtn-width
      );

      &.@{ns}-TableCell--sortable{
        padding-right: calc(
          @TableCell-paddingX + @TableCell-sortBtn-width + @TableCell-filterBtn-width
        );

        & > .@{ns}-TableCell-sortBtn{
          right: calc(
            @TableCell-paddingX - @TableCell-sortBtn-width / 2 + @TableCell-filterBtn-width
          ) !important;
        }
      }
    }


    [data-fixed='left']{
      position: sticky;
      z-index: 10;
      // transform: translateY(0); /* 强制像素对齐 */
      // will-change: transform; /* 提示浏览器优化 */
      &[data-side='true']{
        &::after{
          position: absolute;
          top: 0;
          right: 0;
          bottom: -1px;
          width: 30px;
          transform: translateX(100%);
          transition: box-shadow 0.3s;
          content: "";
          pointer-events: none;
        }
      }
    }

    [data-fixed='right']{
      position: sticky;
      z-index: 10;
      transform: translateY(0); /* 强制像素对齐 */
      will-change: transform; /* 提示浏览器优化 */
      &[data-side='true']{
        &::after{
          position: absolute;
          top: 0;
          bottom: -1px;
          left: 0;
          width: 30px;
          transform: translateX(-100%);
          transition: box-shadow 0.3s;
          content: "";
          pointer-events: none;
        }
      }
    }

    &.leftIn{
      [data-fixed='left']{
        &[data-side='true']{
          border-right: 1px solid @Table-bg;
          &::after{
            box-shadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.06);
          }
        }
      }
    }

    &.rightIn{
      [data-fixed='right']{
        &[data-side='true']{
          &::after{
            box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.06);
          }
        }
      }
    }

    td[data-fixed='right'], td[data-fixed='left'] {
      background: @Table-bg;
    }
  }

  &Cell-sortBtn {
    cursor: pointer;
    width: @TableCell-sortBtn-width;
    height: @gap-md;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: calc(@TableCell-paddingX - @TableCell-sortBtn-width / 2);
    top: 50%;
    transform: translateY(-50%);
    color: @icon-color;

    &:hover {
      color: @icon-onHover-color;
    }

    &--up > svg,
    &--down > svg,
    &--default > svg {
      color: inherit;
      width: 12px;
      height: 12px;
    }

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

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

    &--default {
      &.is-active {
        color: @text--muted-color;
        &:hover {
          color: var(--color-text-1);
        }
      }
    }
    &--up,
    &--down {
      &.is-active {
        color: @TableCell-sortBtn--onActive-color;
      }
    }
  }

  &Cell-searchBtn {
    cursor: pointer;
    // width: @TableCell-searchBtn-width;
    position: absolute;
    right: @gap-xs;
    top: 50%;
    transform: translateY(-50%);
    color: @text--muted-color;

    svg.icon {
      width: 12px;
      height: 12px;
    }

    &:hover {
      color: var(--color-text-1);
    }
    &.is-active {
      color: @TableCell-searchBtn--onActive-color;
    }
  }

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

    .@{ns}-Panel {
      margin: 0;
    }
  }

  &Cell-filterBtn {
    cursor: pointer;
    width: @TableCell-filterBtn-width;
    position: absolute;
    display: flex;
    right: calc(
      @TableCell-paddingX - @TableCell-filterBtn-width / 2;
    );
    top: 50%;
    transform: translateY(-50%);
    color: @text--muted-color;

    svg.icon {
      width: 12px;
      height: 12px;
    }

    &:hover {
      color: var(--color-text-1);
    }

    &.is-active {
      color: @TableCell-filterBtn--onActive-color;
    }

    .@{ns}-Remark {
      display: inline;
    }
  }

  &Cell-filterPopOver {
    border: none;
    width: 160px;

    .@{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: @white;
        margin: 0;

        &:hover {
          background: @light;
          color: var(--primary-color);
        }

        &.is-selected {
          background: @light;
          color: var(--primary-color);
        }

        .@{ns}-Checkbox {
          width: 100%;
          margin: 0;
        }
      }
    }
  }

  &-itemActions-wrap {
    position: absolute;
    width: 100%;
    z-index: calc(@Table-fixed-zIndex + 1);
    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-rgb, 0) 0%,
      rgba(@Table-onHover-bg-rgb, 1) 20%,
      rgba(@Table-onHover-bg-rgb, 1) 100%
    );
    top: @Table-borderWidth;
    bottom: 0;
    right: 0;
    padding-left: 80px;
    padding-right: @TableCell-paddingX;
    display: flex;
    align-items: center;

    a {
      cursor: pointer;
      padding: @gap-xs @gap-sm;
      color: var(--primary-5);
      text-decoration: var(--link-decoration);

      &:hover {
        color: var(--info-onHover);
        text-decoration: var(--link-onHover-decoration);
      }

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


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

    > tbody > tr > th {
      width: 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 @Table-tbody-borderTopColor;

    }
  }

  &-expandBtn {
    position: relative;
    z-index: 1;
    color: @Table-expandBtn-color;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 14px;
    line-height: 1;
    height: 16px;

    > svg {
      display: inline-block;
      text-align: center;
      cursor: pointer;
      transition: transform ease-in-out @animation-duration,
        top ease-in-out @animation-duration;
      position: relative;
      transform-origin: 50% 50%;
      width: 10px;
      height: 10px;
      top: 0;
    }

    &.is-active > svg {
      transform: rotate(90deg);
    }

    &:hover {
      text-decoration: none;
    }
  }

  &-dragBtn {
    margin-right: @gap-xs;
    display: inline-block;
    visibility: hidden;
    cursor: move;
    color: @icon-color;

    &:hover {
      text-decoration: none;
      color: @icon-onHover-color;
    }
    > svg {
      vertical-align: -2px;
    }
  }

  .fake-hide {
    visibility: hidden;
    position: absolute;
  }

  &-badge {
    position: absolute;
    top: 0;
    left: 0;
  }

  &-statistics{
    line-height: 30px;
    vertical-align: middle;
  }

  &-pageSwitch{
    display: flex;
    align-items: center;
    margin-top: 1px;
    .@{ns}-Select2{
      margin-left: @gap-xs;
    }
  }

  &--autoFillHeight {
    margin-bottom: 0;

    .@{ns}-Table-viewPort-full{
      width: 100%;
      height: 100%;
    }

    // 表格
    .@{ns}-Table-contentWrap{
      flex-shrink: 1;
      flex-grow: 1;
      height: 100%;
      overflow: hidden;

      .@{ns}-Table-content{
        width: 100%;
        height: 100%;
        overflow-y: auto;

        table {
          thead {
            position: sticky;
            top: 0;
            z-index: 11;
          }
        }
      }

    }


    // 分页
    > .@{ns}-Table-footToolbar {
      margin-bottom: 0;
      flex-shrink: 0;
      flex-grow: 0;
    }

  }

  &--draggable{
    .@{ns}-Table-table{
      border-collapse: collapse;

      > thead > tr{
        border-bottom: @Table-thead-borderWidth solid var(--color-border);
        th{
          border-bottom-width: 0;
        }
      }

      > tbody > tr:not(.@{ns}-Table-placeholder){
        border-bottom: @Table-thead-borderWidth solid var(--color-border);
        td{
          border-bottom-width: 0;
        }
      }
    }
  }
  // 表格中的标签
  .label {
    display: inline-block;
    padding: 0.2em 0.6em 0.2em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: var(--label-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;

    // Empty labels collapse automatically (not available in IE8)
    &:empty {
      display: none;
    }

    // Quick fix for labels in buttons
    .btn & {
      position: relative;
      top: -1px;
    }
    & + .label {
      margin-left: 5px;
    }
  }
}


// 不知道干嘛
.@{ns}-InputTable-toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

// 不知道干嘛
.@{ns}-InputTable-pager {
  margin-left: auto;
}

// 控制 操作栏按钮
.@{ns}-OperationField {
  margin: -3px 0;
  overflow: hidden;

  > .@{ns}-Button:not(:last-child),
  > .@{ns}-Button--disabled-wrap > .@{ns}-Button {
    margin: 3px 6px 3px 0;
  }

  > .@{ns}-Button--disabled-wrap > .@{ns}-Button--link {
    padding: 0;
  }

  > .@{ns}-Button--link {
    padding: 0;
    margin-right: 10px;
  }
}

@import './detail.less';
@import './ad-control.less';
@import './advanced-filter.less';