.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--hs-spacing-base);
  box-sizing: border-box;
}

.accordion-panel {
  color: var(--hs-color-accordion-fg);
  background-color: var(--hs-color-accordion-bg);
  box-sizing: border-box;
}

.accordion-panel__title {
  padding: var(--hs-spacing-large);
  border-radius: var(--hs-radius-boxes);
  border: 1px solid var(--hs-color-accordion-border);
  cursor: pointer;
}

.accordion-panel__title-text-active {
  display: none;
}

.accordion-panel--active .accordion-panel__title-text-active {
  display: initial;
}

.accordion-panel--active .accordion-panel__title-text-inactive {
  display: none;
}

.accordion-panel--variant-section {
  background-color: transparent;
}

.accordion-panel--variant-section .accordion-panel__title {
  flex-direction: row-reverse;
  justify-content: space-between;
}

.accordion-panel__title:focus-within {
  border-color: var(--hs-palette-primary-main);
}

.accordion-panel--active > .accordion-panel__title {
  border-radius: var(--hs-radius-boxes) var(--hs-radius-boxes) 0 0;
}

.accordion-panel__state-indicator {
  transition-property: transform;
  transition-duration: var(--hs-transitions-duration-long);
  transition-timing-function: var(--hs-transitions-easing);
}

.accordion-panel--active .accordion-panel__state-indicator {
  transform: rotate(180deg);
}

.accordion-panel__content-spacer {
  padding: var(--hs-spacing-base) var(--hs-spacing-large) var(--hs-spacing-large) var(--hs-spacing-large);
}

.accordion-panel__content {
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 0 0 var(--hs-radius-boxes) var(--hs-radius-boxes);
  border: 0 1px 1px 1px solid var(--hs-color-accordion-border);
  display: grid;
  grid-template-rows: 0fr;
  transition-property: grid-template-rows;
  transition-duration: var(--hs-transitions-duration-long);
  transition-timing-function: var(--hs-transitions-easing);
}

.accordion-panel--active .accordion-panel__content {
  grid-template-rows: 1fr;
}

.accordion-panel__content-collapse {
  overflow: hidden;
}