.yc-collapse-item {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-border-2);
  .yc-collapse-item-header {
    overflow: hidden;
    cursor: pointer;
    position: relative;
    padding: 8px 12px;
    background-color: var(--color-bg-2);
    border-bottom: 1px solid transparent;
    color: var(--color-text-1);
    font-size: 14px;
    line-height: 24px;
    transition: border-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    .yc-collapse-item-header-icon {
      position: absolute;
    }
    .yc-collapse-item-header-title {
      flex: 1;
      font-weight: 500;
    }
  }
  .yc-collapse-item-content {
    position: relative;
    overflow: hidden;
    background-color: var(--color-fill-1);
    color: var(--color-text-1);
    font-size: 14px;
    .yc-collapse-item-content-box {
      padding: 8px 0;
    }
  }
}
// postion
@positions: left, right;
each(@positions, {
  .yc-collapse-item-expand-icon-@{value} {
    .yc-collapse-item-header,
    .yc-collapse-item-content {
      padding-left:  if((@value = left), 34px, 13px);
      padding-right: if((@value = left), 13px, 34px);
      .yc-collapse-item-header-icon {
        @{value}: 13px;
      }
    }
  }
});
// disabled
.yc-collapse-item-disabled {
  .yc-collapse-item-header {
    color: var(--color-text-4);
    background-color: var(--color-bg-2);
    cursor: not-allowed;
  }
}
// open
.yc-collapse-item-open {
  .yc-collapse-item-header {
    border-color: var(--color-neutral-3);
  }
}
