@import '../../style/themes/default.less';

.ele-icon-picker {
  cursor: pointer;

  &.ele-disabled {
    cursor: not-allowed;

    .ant-input-prefix {
      opacity: 0.6;
    }
  }

  &:not(.ele-disabled) .ant-input {
    cursor: pointer;
  }

  .ele-icon-picker-arrow {
    font-size: 12px;
    color: @input-placeholder-color;
  }

  &:not(:hover) .ele-icon-picker-arrow .anticon-close-circle {
    display: none;
  }

  &:hover .ele-icon-picker-arrow .anticon-close-circle + .anticon-down {
    display: none;
  }
}

/* 图标选择器 popper */
.ele-icon-picker-popper {
  .ant-popover-inner-content {
    padding: 0;
    width: 520px;
    max-width: 90vw;
  }

  // tab
  .ant-tabs-nav {
    margin: 0;
  }

  .ant-tabs-tab {
    padding: 10px 0 !important;
    margin: 0 12px !important;
  }

  // 搜索框
  .ele-icon-picker-search {
    width: 110px;
    margin-right: 14px;
  }

  // pane
  .ele-icon-picker-pane {
    display: flex;
    height: 360px;

    & > .ant-menu {
      width: 120px;
      height: 100%;
      flex-shrink: 0;
      overflow-x: hidden;

      .ant-menu-item {
        padding: 0 12px !important;
        margin: 12px 0 0 0 !important;
      }

      .ant-menu-item-selected:after {
        right: 1px;
      }
    }
  }
}

/* icon grid */
.ele-icon-picker-popper {
  .ele-icon-picker-list {
    flex: 1;
    height: 100%;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 2px solid transparent;
    overflow-x: hidden;
    overflow-y: scroll;
    font-size: 0;
  }

  // item
  .ele-icon-picker-item {
    width: 16.66%;
    display: inline-block;
    padding: 6px 2px 6px 10px;
  }

  .ant-card-body {
    padding: 0;
  }

  .ele-icon-picker-item-icon {
    font-size: 18px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    transition: transform 0.1s;
    overflow: hidden;

    &:hover {
      transform: scale(1.6);
    }
  }

  .ele-icon-picker-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media screen and (max-width: 520px) {
  .ele-icon-picker-popper .ele-icon-picker-item {
    width: 33.33%;
  }
}