.container {
  display: flex;
  padding: 0 8px;
  position: relative;
  cursor: pointer;
  color: var(--easyv-text-base);
  list-style: none;
  outline: none;
  align-items: center;
  height: 44px;

  &:global {
    &.z-hover {
      background: var(--easyv-background-5);
      .iconfont.icon-icon_hide {
        display: inline;
      }
    }
    &.hide {
      color: #666;
    }
    &.selected {
      cursor: move;
      background: var(--easyv-primary-color);
      color: #ffffff;
      .iconfont.icon-icon_delight {
        display: inline;
        color: white;
      }
    }
  }
}

:global(.hide) {
  .container {
    color: #666;
    &:global {
      &.selected {
        color: #ffffff;
      }
    }
  }
}

.thumb {
  width: 45px;
  height: 29px;
  margin: 0 4px 0px 0px;
  border: 1px solid rgba(180, 183, 193, 0.34);
  overflow: hidden;
  background: #000;
  &.isPanel {
    border-color: #cb824f;
  }
  &.isRef {
    border-color: #599b86;
  }
}

.icon {
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  &:hover {
    color: var(--easyv-text-2);
  }
}
