.l-collapse {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: var(--td-text-color-primary);
  font-size: var(--td-font-size-body-medium);
  font-family: var(--td-font-family);
  list-style: none;
  border: solid 1px var(--td-component-border);
  border-bottom: 0;
  background: var(--td-bg-color-container);
}
.l-collapse.l--border-less {
  border: none;
}
.l-collapse.l--border-less .l-collapse-panel__header {
  border-bottom: none;
}
.l-collapse.l--border-less .l-collapse-panel__body {
  background: var(--td-bg-color-container);
  border: none;
}
.l-collapse-panel__icon {
  cursor: pointer;
}
.l-collapse-panel__icon--left {
  margin-right: 8px;
}
.l-collapse-panel__icon--right {
  margin-left: 8px;
}
.l-collapse-panel__icon:hover {
  background-color: var(--td-bg-color-container-hover);
  border-radius: var(--td-radius-small);
  transition: background-color 0.2s;
}
.l-collapse-panel__wrapper {
  overflow: hidden;
}
.l-collapse-panel__wrapper .l-collapse-panel__header {
  padding: 0 16px;
  border-bottom: solid 1px var(--td-component-border);
  height: 46px;
  font: var(--td-font-title-small);
  display: flex;
  align-items: center;
}
.l-collapse-panel__wrapper .l-collapse-panel__header--blank {
  flex: 1;
}
.l-collapse-panel__wrapper .l-collapse-panel__header.l-is-clickable {
  cursor: pointer;
}
.l-collapse-panel__wrapper .l-collapse-panel__body {
  border-bottom: solid 1px var(--td-component-border);
  background: var(--td-bg-color-secondarycontainer);
}
.l-collapse-panel__wrapper .l-collapse-panel__body--collapsed {
  border: none;
}
.l-collapse-panel__wrapper .l-collapse-panel__content {
  padding: 12px 16px 12px 40px;
  color: var(--td-text-color-secondary);
}
.l-collapse-panel.l-is-disabled .l-collapse-panel__header {
  cursor: not-allowed;
  color: var(--td-text-color-disabled);
}
.l-collapse-panel.l-is-disabled .l-collapse-panel__icon {
  cursor: not-allowed;
}
.l-collapse-panel.l-is-disabled .l-collapse-panel__body {
  background: var(--td-bg-color-component-disabled);
}
.l-collapse-panel.l-is-disabled .l-collapse-panel__content {
  color: var(--td-text-color-disabled);
}
.l-collapse-panel .l-fake-arrow {
  transform: rotate(-90deg);
}
.l-collapse-panel .l-fake-arrow--active {
  transform: rotate(180deg);
}
.l-slide-down-enter-active,
.l-slide-down-leave-active {
  transition: height 0.3s, padding 0.3s;
}
