div.accordion {
  details {
    summary {
      cursor: pointer;
      list-style-type: none;
      border-radius: 0.25rem;
      padding: 0.5rem;

      &:hover {
        background-color: var(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);
      }
    }

    &::details-content {
      opacity: 0;
      transition: all 200ms ease-in-out;
    }

    &[open] {
      &::details-content {
        opacity: 1;
      }

      summary {
        background-color: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container);
      }
    }
  }
}