// 排序元素通用样式设置
.c-sort-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #cde0ff;
  background: #fff;
  &-vertical {
    padding: 0 8px;
    height: 37px;
    &:not(:last-child) {
      margin-bottom: 2px;
    }
  }
  &-horizontal {
    display: inline-flex;
    width: 100px;
    height: 100px;
    padding: 4px 6px;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    &:not(:last-child) {
      margin-right: 2px;
    }
  }
  &-grid {
    display: flex;
    flex-direction: column;
    width: calc((100% - 4 * 10px) / 5); // 5个元素一行
    height: 100px;
    user-select: none;
  }
}

// 横向排序时容器内元素不换行
.hori-sort-list {
  white-space: nowrap;
}

// 网格排序时容器内元素换行
.grid-sort-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

// 高亮元素样式设置
.custom-sort-helper {
  box-shadow: 0 0 1px 2px rgb(127, 176, 255);
}