:host {
  /**
    * @prop --collapse-item-font-size: font-size applied for both summary and detail content.
    * @prop --collapse-item-summary-font-size: font-size applied to summary only.
    * @prop --collapse-item-detail-font-size: font-size applied to detail only.
    */
  --collapse-item-font-size: var(--joy-font-size-primary-300);
  --collapse-item-transition: var(--joy-transition-duration-default);
  display: block;
}

.joy-collapse-item {
  display: flex;
  flex-direction: column;
  font-family: var(--joy-font-family-base);
}
.joy-collapse-item__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--joy-core-spacing-3);
  font-size: var(--collapse-item-summary-font-size, var(--collapse-item-font-size));
  font-weight: var(--joy-font-weight-bold);
}
.joy-collapse-item__summary .joy-collapse-item__summary___marker {
  cursor: pointer;
  color: var(--joy-color-neutral-40);
  transform-origin: center;
  transition: transform var(--collapse-item-transition) var(--joy-transition-timing-function);
}
.joy-collapse-item__summary___content, .joy-collapse-item__summary ::slotted([slot=collapse-summary]) {
  display: flex;
  align-items: center;
  gap: var(--joy-core-spacing-2);
}
.joy-collapse-item__summary, .joy-collapse-item__more {
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.joy-collapse-item__detail {
  display: none;
  position: relative;
  height: auto;
  transition: height var(--collapse-item-transition) ease-in-out;
  font-size: var(--collapse-item-detail-font-size, var(--collapse-item-font-size));
  font-weight: var(--joy-font-weight-normal);
}
.joy-collapse-item__detail--open {
  display: block;
  margin-bottom: var(--joy-core-spacing-3);
}
.joy-collapse-item ::slotted(joy-icon[slot=collapse-marker]) {
  cursor: pointer;
  color: var(--joy-color-neutral-40);
  transform-origin: center;
  transition: transform var(--collapse-item-transition) var(--joy-transition-timing-function);
}
.joy-collapse-item--open ::slotted(joy-icon[slot=collapse-marker]),
.joy-collapse-item--open .joy-collapse-item__summary___marker {
  transform: rotate(180deg);
}
.joy-collapse-item--see-more .joy-collapse-item__summary {
  order: 2;
}
.joy-collapse-item--see-more .joy-collapse-item__detail {
  order: 1;
}

::slotted(*) {
  padding: 0;
  margin: 0;
}