/* Accordion block styles */

.accordion {
  border-radius: 0.25rem;
  border: 1px solid var(--color-dark);
  width: 100%;

  details.accBody {
    border-bottom: 1px solid var(--color-dark);
    max-height: 3.7rem;
    overflow: hidden;
    padding: 1rem;
    transition: 0.75s max-height ease-in-out;
    transition-behavior: allow-discrete;

    &:last-of-type { border: none; }

    summary.accHeader {
      cursor: pointer;
      list-style-type: none;
      padding-right: 2rem;
      position: relative;

      &::-webkit-details-marker { display: none; }

      h2 {
        color: var(--color-dark);
        cursor: pointer;
        font-size: 1.25rem;
        font-weight: 500;
        margin: 0;
      }

      svg.marker {
        color: var(--color-dark);
        fill: var(--color-dark);
        height: 1rem;
        position: absolute;
        right: 0;
        top: 0.25rem;
        width: 1.25rem;
      }
    }

    div.accContent {
      margin-top: 1rem;
    }

    &[open] {
      background-color: var(--color-dark);
      border-color: var(--color-light);
      color: var(--color-light);
      max-height: 20rem;
      transition: 0.75s max-height ease-in-out;
      transition-behavior: allow-discrete;

      summary.accHeader {
        h2 { color: var(--color-light); }

        svg.marker {
          color: var(--color-light);
          fill: var(--color-light);
          transform: rotate(45deg);
        }
      }
    }
  }
}