@import "../style/var.less";
@import "../style/base.less";

.fe-drop {
  position: relative;
  display: inline-block;
  &-wapper {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    overflow: hidden;
    &&-up {
      top: 0;
    }
  }
  &-popop {
    position: absolute;
    max-height: 80%;
    transition-duration: 0.2s;
    z-index: 3006;
  }
  &-cell {
    position: relative;
    &-title {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      padding: 0;
      overflow: hidden;
      color: #323233;
      font-size: 14px;
      line-height: 24px;
      background-color: #fff;
      &:not(:last-child)::after {
        position: absolute;
        box-sizing: border-box;
        content: " ";
        pointer-events: none;
        right: 0;
        bottom: 0;
        left: 16px;
        border-bottom: 1px solid #ebedf0;
        transform: scaleY(0.5);
      }
    }
  }
  &-list {
    background: @white;
    min-height: 150px;
    max-height: 500px;
    overflow-y: auto;
    text-align: left;

    &-li {
      height: 36px;
      line-height: 36px;
      margin: 8px 0 8px 13px;
      width: calc(100% / 3 - 44px);
      padding: 0 13px;
      position: relative;
      // display: inline-block;
      font-size: 14px;
      background: #f5f5f5;
      color: #333333;
      text-align: center;
      border-radius: 4px;
      overflow: hidden;
      float: left;
      .fe-ellipsis();
      .fe-drop-checkedicon {
        display: none;
      }

      &.s-crt {
        color: #108ee9;
        background: #c6e6fd;

        .fe-drop-checkedicon {
          display: inline;
          position: absolute;
          right: 0;
          bottom: -1px;
          font-size: 18px;
          color: #108ee9;
        }
      }

      &.fe-drop-disabled {
        color: #999999;
      }
    }
  }
  &-btnbox {
    display: flex;
    align-items: center;
    button {
      flex: 1;
    }
    .fe-drop-cancel {
      border: 0;
    }
  }
}