details {
  display: block;
  clear: both;
  margin-bottom: $gutter;

  summary {
    display: inline-block;
    color: $link-colour;
    cursor: pointer;
    position: relative;
    margin-bottom: em(5);

    &:hover {
      color: $link-hover-colour;
    }

    &:focus {
      outline: 3px solid $focus-colour;
    }
  }

  // Underline only summary text (not the arrow)
  .summary {
    text-decoration: underline;
  }

  // Match fallback arrow spacing with -webkit default
  .arrow {
    margin-right: .35em;
    font-style: normal;
  }

}