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

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

    &::before {
      display: none;
    }

    &:focus {
      outline: 0;
      box-shadow: 0 0 0 2px var(--color-brand-primary-300);
    }

    //Show focus styles on keyboard focus.
    &:focus-visible {
      outline: 0;
      box-shadow: 0 0 0 2px var(--color-brand-primary-300);
    }

    // Hide focus styles if they are not needed, for example,
    // when an element receives focus via the mouse.
    &:focus:not(:focus-visible) {
      outline: 0;
      box-shadow: none;
    }
  }
}
