/* See ./accordion.md for design notes and rationale. */

.product-hero > .l-split-sticky__left > .accordion-wrapper {
  margin-block-start: var(--ll-space-9);
}

.accordion {
  display: flex;
  flex-direction: column;
}

.accordion__item {
  border-top: var(--ll-border-width-xs) solid
    color-mix(in srgb, var(--ll-color-border-tertiary) 20%, transparent);
}

.accordion__item:not(:has(~ .accordion__item)) {
  border-bottom: var(--ll-border-width-xs) solid
    color-mix(in srgb, var(--ll-color-border-tertiary) 20%, transparent);
}

.accordion__heading {
  margin: 0;
  font: inherit;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ll-space-5);
  width: 100%;
  padding: var(--ll-space-7) 0;
  border: 0;
  background: transparent;
  color: var(--ll-color-text-secondary);
  font-size: var(--ll-text-body-xl-size);
  font-weight: 500;
  line-height: var(--ll-text-body-xl-line-height);
  letter-spacing: var(--ll-text-body-xl-letter-spacing);
  text-align: left;
  cursor: pointer;
}

.accordion__trigger:focus-visible {
  outline: 2px solid var(--ll-color-focus-ring);
  outline-offset: 2px;
}

.accordion__title {
  flex: 1 1 auto;
}

.accordion__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background-color: currentcolor;
  mask: var(--accordion-icon-url-mobile) center / contain no-repeat;

  /* stylelint-disable-next-line property-no-vendor-prefix --
     Safari < 15.4 still requires the -webkit-mask shorthand. */
  -webkit-mask: var(--accordion-icon-url-mobile) center / contain no-repeat;
  transition: transform
    var(--ll-motion-interactive-state-duration)
    var(--ll-motion-interactive-state-easing);
}

.accordion__icon > img {
  display: none;
}

.accordion__item.is-open > .accordion__heading > .accordion__trigger > .accordion__icon {
  transform: rotate(180deg);
}

@media (width >= 1024px) {
  .accordion__icon {
    width: 32px;
    height: 32px;
    mask-image: var(--accordion-icon-url-desktop);

    /* stylelint-disable-next-line property-no-vendor-prefix --
       Safari < 15.4 still requires the -webkit-mask-image longhand. */
    -webkit-mask-image: var(--accordion-icon-url-desktop);
  }
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows
      var(--ll-motion-enter-duration)
      var(--ll-motion-enter-easing),
    visibility 0s linear var(--ll-motion-enter-duration);
}

.accordion__item.is-open > .accordion__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows
      var(--ll-motion-enter-duration)
      var(--ll-motion-enter-easing),
    visibility 0s;
}

.accordion__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.accordion__item.is-open:has(~ .accordion__item) > .accordion__panel > .accordion__panel-inner {
  padding-bottom: calc(2 * var(--ll-space-6));
}

@media (width >= 1024px) {
  .accordion__item.is-open:has(~ .accordion__item) > .accordion__panel > .accordion__panel-inner {
    padding-bottom: var(--ll-space-9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .accordion__icon,
  .accordion__panel {
    transition: none;
  }
}