@use '@/styles/mixins/mixins' as *;

@include b(group-list) {
  @include m('header') {
    @apply mt-24px;

    @include e(item) {
      @apply justify-start;

      .ac-iconfont,
      .el-icon {
        @apply text-blue-lighter mr-8px;
      }
    }
  }

  @include e(item) {
    @apply rounded-5px cursor-pointer h-40px text-14px flex flex-y-center px-20px;
    @apply text-gray-title font-500;
    
    @include m(more) {
      @apply justify-between;

      > .el-icon {
        visibility: hidden;
      }

      &:hover {
        > .el-icon {
          visibility: visible;
        }
      }
    }

    & + & {
      margin-top: 4px;
    }

    &.active {
      background-color: #e5f0ff;
      .ac-iconfont,
      .el-icon {
        @apply font-600;
      }
    }

    &:hover {
      @apply bg-gray-110;
    }
  }

  @include e(title) {
    @apply truncate flex-auto;
  }

  @include e(segment) {
    @apply text-#101010 font-500 my-10px flex-y-center justify-between;
  }

  @include e(dot) {
    @apply mr-8px w-3px h-3px bg-black rounded-full mt-2px flex-none;
  }
}
