/**
  * Accordion
 */

:root {
  --accordion-border-radius: var(--bs-border-radius-xl);
}

.section-accordion {
  margin-bottom: 4rem;
  display: flex;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .block-accordion {
    width: 66.66667%;
    margin: 0 auto;
  }
}

.accordion {
  border-radius: var(--accordion-border-radius);
  box-shadow: var(--box-shadow-with-border);
  overflow: hidden;
  padding: 0 !important;

  .accordion-items {
    margin-bottom: 0;
  }

  .accordion-title {
    margin-bottom: 0;

    &:first-child .accordion-title-button {
      border-top: 0;
    }
  }

  .accordion-title-button {
    border-top: 1px solid var(--gray-100);
    border-radius: 0;
    font-size: var(--paragraph-font-size);
    font-weight: var(--font-weight-bold);
    transition: var(--transition);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--spacing) * 1.25) calc(var(--spacing) * 1.5);

    .icon {
      width: 16px;

      svg {
        transition: transform .25s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        width: 100%;
      }
    }

    &.is-expanded,
    &:hover,
    &:focus {
      background: var(--gray-50);
    }

    &.is-expanded .icon svg {
      transform: rotate(-135deg);
    }
  }

  .accordion-content {
    display: none;
    background: var(--gray-50);
    padding: calc(var(--spacing) * .5) calc(var(--spacing) * 1.5) calc(var(--spacing) * 1.25);
    margin-bottom: 0;
  }
}