@import './component-mixin';
.#{$ns}ColumnToggler {
  position: relative;
  display: inline-block;

  &-caret {
    margin-left: var(--DropDown-caret-marginLeft);
    display: inline-block;
    vertical-align: top;
    transition: transform var(--animation-duration) ease;

    >svg {
      width: px2rem(10px);
      height: px2rem(10px);
      top: 0.125em;
    }
  }

  &.is-opened &-caret {
    transform: rotate(180deg);
  }

  &.is-actived>.#{$ns}Button {
    color: var(--link-color);
  }

  &--block {
    display: block;

    .#{$ns}Button {
      display: block;
    }
  }

  &-menu {
    position: absolute;
    z-index: $zindex-dropdown;
    top: 100%;
    left: 0;
    margin: px2rem(1px) 0 0;
    background: var(--DropDown-menu-bg);
    list-style: none;
    padding: var(--DropDown-menu-paddingY) var(--DropDown-menu-paddingX);
    border: var(--DropDown-menu-borderWidth) solid var(--DropDown-menu-borderColor);
    border-radius: var(--DropDown-menu-borderRadius);
    box-shadow: var(--DropDown-menu-boxShadow);
    min-width: var(--DropDown-menu-minWidth);
    text-align: left;
  }

  &--alignRight &-menu {
    left: auto;
    right: 0;
  }

  &-menuItem,
  &-menu>li {
    padding: var(--DropDown-menuItem-paddingY) var(--DropDown-menuItem-paddingX);
    white-space: nowrap;
    box-sizing: border-box;
    height: var(--DropDown-menu-height);
    vertical-align: middle;
    user-select: none;
    color: var(--link-color);
    text-decoration: var(--link-decoration);

    &:hover {
      background: var(--DropDown-menuItem-onHover-bg);
      color: var(--DropDown-menuItem-onHover-color);
    }

    &.is-active {
      color: var(--DropDown-menuItem-onActive-color);
    }

    &:not(.is-disabled),
    &:not(.disabled) {
      cursor: pointer;
    }

    &.is-disabled {
      cursor: not-allowed;
      // pointer-events: none;
      color: var(--DropDown-menuItem-onDisabled-color);
      filter: grayscale(80%);
    }

    &.#{$ns}DropDown-divider {
      height: px2rem(1px);
      margin: px2rem(9px) 0;
      overflow: hidden;
      background: var(--DropDown-menu-borderColor);
      padding: 0;
    }
  }

  &-menu>li a {
    color: inherit;
    display: block;
    text-decoration: none;
  }

  &-popover {
    border: none;
    box-shadow: none;
  }

  >.#{$ns}Button {
    min-width: unset;
  }

  @mixin flex-layout($direction: row) {
    display: flex;
    flex-flow: $direction nowrap;
    justify-content: space-between;
    align-items: center;
  }

  &-modal {
    @include flex-layout(column);
    border-radius: var(--ColumnToggler-borderRadius);
    background: var(--ColumnToggler-backgroundColor);
    box-shadow: 0 4px 5px 0 rgba(21, 26, 38, 0.06),
      0 1px 10px 0 rgba(21, 26, 38, 0.05), 0 2px 4px -1px rgba(21, 26, 38, 0.04);

    &-header {
      width: 100%;
      @include flex-layout();

      .ant-select:not(.ant-select-customize-input) .ant-select-selector {
        border-radius: 6px;
      }
    }

    &-body {
      display: flex;
      flex-wrap: nowrap;
      max-height: 500px;
      overflow-y: hidden;
      width: 100%;
    }

    &-body-right {
      flex: 1;
      overflow-y: hidden;

      .#{$ns}ColumnToggler-menuItem {
        width: 100% !important;
      }

      .#{$ns}ColumnToggler-modal-content {
        max-height: calc(100% - 64px);
      }

      .display-field-active {
        background: var(--ColumnToggler-item-backgroundColor-onHover);
      }

      .field-search {
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .ant-input-affix-wrapper {
          padding: 2px 8px;
          font-size: 14px;
          margin-right: 16px;
          @include media-breakpoint-down(sm) {
            margin-left: 8px;
            margin-right: 8px;
          }
        }

        .field-toolbars-title {
          display: flex;
        }
      }
    }

    &-body-right {
      .tool-header-box {
        display: flex;
        justify-content: space-between;
        padding: 6px 12px;
        background: #f0f2f5;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .btns {
          display: flex;
          align-items: center;

          .#{$ns}Button {
            padding: 0 5px;
          }
        }
      }

      //滚动条样式
      ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }

      ::-webkit-scrollbar-corner {
        background-color: #fff;
      }

      ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .2);
        border-radius: 5px;
        border: 1px solid #f1f1f1;
        -webkit-transition: background-color .3s;
        transition: background-color .3s;
      }

      ::-webkit-scrollbar-track {
        background: #f8f8f8;
      }
    }

    &-content:after {
      clear: both;
    }

    &-content {
      padding: 0;
      width: 100%;
      list-style: none;
      margin: 0 0 px2rem(8px);
      padding-bottom: 16px;
      overflow-y: auto;
      max-height: calc(100% - 24px);

      .#{$ns}ColumnToggler-menuItem {
        color: var(--saas-font-size-black);
        // background: var(--ColumnToggler-item-backgroundColor);
        border-radius: px2rem(2px);
        font-size: 14px;
        padding: px2rem(4px) px2rem(8px);
        height: var(--ColumnToggler-lineHeight);
        // width: calc((100% - 24px) / 3); // Jay
        width: 100px;
        float: left;
        margin: px2rem(4px);
        // text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;

        @media screen and (min-width:1280px) and (max-width:1440px) {
          height: 1.2rem;
          font-size: 0.75rem;
          padding: 0.15rem 0.5rem;
        }

        &:hover {
          background: var(--ColumnToggler-item-backgroundColor-onHover);
        }

        &--dragging {
          border: 1px solid var(--link-color);
        }

        label {
          >i {
            height: var(--fontSizeLg);
            width: var(--fontSizeLg);
            vertical-align: top;
          }
        }

        &-dragBar {
          margin-left: 0;
          margin-right: var(--gap-xs);
          cursor: move;
          color: #d8d8d8;
        }

        &-dragBar+span {
          &:hover {
            flex: 0 0 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .operation-icons {
          margin: 0 14px;
        }
      }
    }

    &-footer {
      width: 100%;
      @include flex-layout();

      .#{$ns}ColumnToggler-modeSelect {
        color: var(--ColumnToggler-fontColor);
        font-size: var(--fontSizeSm);

        &.is-actived {
          color: var(--link-color);
        }
      }

      .footer-btn-group-left {
        flex-grow: 1;

        .defaultModal-footer-left {
          display: flex;
          align-items: center
        }
      }

      &>div {
        @include flex-layout();

        &:first-child {
          justify-content: flex-start;

          a {
            display: inline-block;
          }
        }

        &:last-child {
          justify-content: flex-end;

          // button {
          //   width: 72px; // Jay
          // }
        }
      }
    }
  }

  // Jay
  &-menuItem {
    .#{$ns}Checkbox {
      .#{$ns}TplField {
        vertical-align: text-top;

        &>span {
          position: relative;
          top: -3px;
          display: inline-block;
          max-width: 70px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          @media screen and (min-width:1280px) and (max-width:1440px) {
            top: -2px;
          }
        }
      }
    }
  }

  //移动端设置列
  &.is-mobile {
    height: 100%;
    display: flex;
    flex-direction: column;
    font-size: 16px;

    .#{$ns}ColumnToggler-modal-header {
      margin-bottom: 0;
      padding: 16px;
      font-size: 16px;
      border-bottom: 1px solid var(--saas-Border-Dividers);

      .header-left {
        display: flex;
        align-items: center;
        font-size: 16px;

        .#{$ns}Button {
          color: var(--them-btn-color);
          font-size: 16px;
        }

        .name-bar {
          color: var(--saas-Title-Text);
          font-weight: 500;
        }
      }

      .header-right {
        .#{$ns}Button {
          color: var(--them-btn-color);
          font-size: 16px;

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

    .#{$ns}ColumnToggler-modal-body {
      height: 100%;
      max-height: 100%;
      flex: 1;
      border: 0;
      display: block;

      .#{$ns}ColumnToggler-modal-body-right {
        margin: 0 16px;
        border: 0;
        display: block;
        height: 100%;
        background-color: var(--saas-Background-Header);

        .field-search {
          padding: 8px 0;
          background-color: var(--saas-main-bg);

          .ant-input-affix-wrapper {
            padding: 4px 11px;
            font-size: 14px;
          }
        }

        .#{$ns}ColumnToggler-modal-content {
          height: calc(100% - 45px);
          max-height: 100%;
          padding: 0;
          margin: 0;

          //隐藏滚动的
          &::-webkit-scrollbar {
            display: none;
          }

          .#{$ns}ColumnToggler-menuItem {
            font-size: 16px;
            background-color: var(--saas-main-bg);
            padding: 12px 0px;
            margin: 0;
            margin-bottom: 1px;
            height: auto;

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

            .operation-icons {
              opacity: 1;
              margin: 0 8px;
            }

            .menuItem-col {
              color: var(--saas-Secondary-Text);
            }
          }

          .#{$ns}ColumnToggler-menuItem.display-field-active {
            background-color: var(--ColumnToggler-item-backgroundColor-onHover);
          }
        }
      }
    }

    .#{$ns}ColumnToggler-modal-footer {
      padding: 14px 16px;
      display: flex;
      justify-content: flex-end;

      .footer-btn-group-left,
      .footer-btn-group-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .#{$ns}Button {
          font-size: 15px;
          margin-left: 8px;
          color: var(--saas-Title-Text);
        }

        .#{$ns}Button--primary {
          color: #fff;
          background: #1890ff;
          border-color: #1890ff;
          
        }
      }
    }
  }
}

.#{$ns}ColumnToggler-tooltip {
  border: none;

  .#{$ns}Tooltip-arrow::before {
    border-top-color: transparent;
  }
}

.temp-selector-drop {
  .ant-select-item-option {
    .ant-select-item-option-content {
      display: flex;
      justify-content: space-between;
    }

    .temp-tools {
      opacity: 0;

      .anticon {
        width: 30px;
      }
    }

    .temp-tools.is-mobile {
      opacity: 1;
    }

    &:hover {
      .temp-tools {
        opacity: 1;
      }
    }
  }
}

.#{$ns}ColumnToggler-modal-header {
  .ant-select {
    color: var(--saas-font-size-black);

    .ant-select-selector {
      border-radius: 4px;
      background-color: var(--Form-input-bg);
      border-color: var(--DatePicker-borderColor);

      &:hover {
        border-color: #40a9ff;
      }
    }

    .ant-select-arrow {
      color: var(--saas-font-size-light-black);
    }
  }
}

.tmp-modal {
  .ant-modal {
    &-content {
      background-color: var(--saas-crud-advanced-modle-body-color);
    }

    &-close {
      color: var(--saas-font-size-deep-black);
    }

    &-body {
      .ant-form-item-required {
        color: var(--saas-font-size-black);
      }

      .ant-form-item-control-input-content {
        input {
          color: var(--saas-font-size-black);
          background-color: var(--Form-input-bg);
          border-color: var(--Form-input-borderColor);
        }
      }
    }

    &-header {
      background-color: var(--saasBodyMessageTablePaginationColor);
      border-bottom-color: var(--saas-border-color);
    }

    &-title {
      color: var(--saas-font-size-black);
    }

    &-footer {
      border-top-color: var(--saas-border-color);
    }
  }
}

.#{$ns}ColumnToggler-modal {
  .ant-modal-content {
    .ant-modal-header {
      .ant-modal-title {
        font-weight: 500;
      }
    }

    .ant-modal-body {
      padding: 16px;
    }
  }

  padding-bottom: 0;
}