:where(.accordion) {
  font-size: var(--font-size-sm);

  details {
    border-block-end-width: var(--border-width-thin);
    border-block-end-style: var(--border-style-solid);
    border-block-end-color: var(--gray-300);
  }

  summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-weight: var(--font-weight-medium);
    padding-block: var(--spacing-4);

    i {
      display: inline-flex;
      height: var(--spacing-6);
      width: var(--spacing-6);
      text-align: var(--center);
      font-size: var(--font-size-sm);
      margin-left: var(--spacing-4);
      border: var(--border-width-thin) var(--border-style-solid) var(--primary-500);
      border-radius: var(--radius-sm);
      background-color: var(--primary-100);
      color: var(--primary-900);
    }

    &:focus-visible {
      outline: var(--border-width-medium) auto var(--gray-300);
    }

    &::after {
      content: "\F282";
      font-family: "bootstrap-icons";
      font-size: var(--font-size-base);
      margin-inline-start: auto;
      transition: transform var(--transition-duration-200);
    }

    details[open] > &::after {
      transform: rotate(-180deg);
    }
  }
}