@import '../../../assets/variable.less';
.module-user-tag-config-panel-layers {
  &-tip {
    > span {
      &:first-child {
        margin-right: @margin-md;
        font-weight: 500;
      }
      &:last-child {
        color: @text-color-secondary;
      }
    }
  }
  &-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(auto, 1fr));
    gap: @padding-md;
    max-width: 1314px;
    margin-bottom: @margin-xs;
    padding-bottom: @padding-md;
    &-item {
      display: flex;
      align-items: center;
      height: 32px;
      padding: 0 @padding-sm;
      background: #ffffff;
      border-radius: 100px;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
      cursor: grab;
      .layer-operation {
        .module-user-compoent-more-popover-button {
          visibility: hidden;
        }
      }
      &.current {
        border: 1px solid @primary-color;
      }

      &.seleced {
        border: 1px solid @primary-color;
      }

      &.error {
        color: @error-color;
        border: 1px solid @error-color;
      }

      &:hover {
        .module-user-compoent-more-popover-button {
          visibility: visible;
        }
      }
      &-text {
        flex: 1;
        min-width: 0;
        height: 100%;
        padding-right: @padding-md;
        overflow: hidden;
        line-height: 30px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &.add {
        text-align: center;
        background: #fafafb;
        border: 1px dashed @border-color-base;
        box-shadow: none;
        cursor: pointer;
        .module-user-tag-config-panel-layers-list-item-text {
          display: flex;
          align-items: center;
          justify-content: center;
          > i {
            margin-right: @margin-xss;
          }
        }
        &:hover {
          color: @primary-color;
          border: 1px dashed @primary-color;
        }
        &.disable {
          color: #cacdd4;
          border: 1px dashed @border-color-base;
          cursor: not-allowed;
        }
      }
    }
    .layer-temp {
      border: 1px dashed #ecedf0;
      border-radius: 100px;
      // position: absolute;
      cursor: grabbing;
    }
  }
}