.l-collapse {
  /* 边框颜色 */
  --l-collapse-border-color: #dedede;
  /* 圆角 */
  --l-collapse-border-radius: 0px;
  --l-collapse-gap: 0px;
  display: grid;
  gap: var(--l-collapse-gap, 0px);
  grid-template-columns: 1fr;
}

.l-collapse-item {
  border-bottom: 1px solid var(--l-collapse-border-color);
  color: #333;
  font-size: 14px;
}
.l-collapse-item:first-child {
  border-top-left-radius: var(--l-collapse-border-radius, 0px);
  border-top-right-radius: var(--l-collapse-border-radius, 0px);
}
.l-collapse-item:last-child {
  border-bottom-left-radius: var(--l-collapse-border-radius, 0px);
  border-bottom-right-radius: var(--l-collapse-border-radius, 0px);
}

.l-collapse-item__header {
  display: flex;
  align-items: center;
  padding: 10px 0;
  cursor: pointer;
  justify-content: flex-start;
}

.l-collapse-item--content {
  overflow-y: hidden;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.l-collapse-content--box {
  padding-bottom: 15px;
}

.l-collapse-arrow-icon {
  transform: rotate3d(0, 0, 1, 0deg);
  transition: transform 0.3s ease-in-out;
}
.l-collapse-arrow__left {
  margin-right: 5px;
}
.l-collapse-arrow__right {
  margin-left: 5px;
}

.l-collapse-item--active .l-collapse-arrow-icon {
  transform: rotate3d(0, 0, 1, 90deg);
}

.l-collapse--background .l-collapse-item {
  border-left: 1px solid var(--l-collapse-border-color);
  border-right: 1px solid var(--l-collapse-border-color);
  background-color: rgba(0, 0, 0, 0.02);
}
.l-collapse--background .l-collapse-item:first-child {
  border-top: 1px solid var(--l-collapse-border-color);
}
.l-collapse--background .l-collapse-item__header {
  padding: 10px 15px;
}

.l-collapse--background .l-collapse-item--content {
  border-top: 1px solid var(--l-collapse-border-color);
  background-color: #ffffff;
}
.l-collapse--background .l-collapse-content--box {
  padding: 15px;
}

.collapse-enter-active,
.collapse-leave-active {
  transition: height 0.15s linear;
}

.l-collapse--space.l-collapse--background .l-collapse-item {
  border-top: 1px solid var(--l-collapse-border-color);
}
.l-collapse--space .l-collapse-item {
  border-radius: var(--l-collapse-border-radius, 0px);
}

/* 网格模式 */
.l-collapse--grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  align-items: start;
}