// 旋转动画
@keyframes animate-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.cascader {
  position: relative;
  display: inline-block;
  margin: 20px;

  &-title {
    box-sizing: border-box;
    width: 220px;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    border: 1px solid #eee;
    border-radius: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
  }

  &-panel {
    position: absolute;
    top: 60px;
    left: 0;
    z-index: 999;
    background: #fff;
    &-content {
      display: flex;
      border: 1px solid #eee;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    }
  }

  .empty-data {
    width: 200px;
    height: 230px;
    max-height: 230px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  }

  &-options {
    width: 200px;
    height: 230px;
    max-height: 230px;
    padding: 5px 0;
    overflow-y: scroll;
    background: #fff;
    &-item {
      position: relative;
      box-sizing: border-box;
      padding: 0 10px;
      height: 35px;
      line-height: 35px;
      color: #333;
      cursor: pointer;
      user-select: none;
      transition: all .25s;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      &.active,
      &:hover {
        background-color: #F5F7FA;
        color: blue;
      }

      .icon-container {
        position: absolute;
        width: 18px;
        height: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        right: 10px;
        top: 50%; 
        margin-top: -9px;
      }
      .icon-loading {
        // 要做旋转动画 --> 注意是做动画 --> 不是过渡
        animation-name: animate-spin;
        animation-duration: 1.5s;
        animation-delay: 0ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }
    }
  }
}