.rings {
  margin-top: 1rem;
  text-align: center;

  details > summary {
    list-style: none;
    cursor: pointer;

    &::before, &::after {
      margin: 0 .5rem;
    }

    &::before { content: '▶'; }
    &::after { content: '◀'; }

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

  details[open] {
    summary {
      &::before, &::after {
        content: '▼';
      }

      margin-bottom: 1rem;
    }
  }

  ul {
    list-style: none;
    margin: 0;
  }

  li {
    margin: 0;
    padding: 0;
  }
}