// Details
// ==========================================================================
// GOV.UK front end toolkit dependencies
@import "../govuk_frontend_toolkit/colours";

details {
  display: block;

  summary {
    display: inline-block;
    color: $govuk-blue;
    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: none;
  }

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

  // Remove top margin from bordered panel
  .panel-indent {
    margin-top: $gutter-half;
    margin-bottom: 0;
  }
}

// Details
// ==========================================================================
// GOV.UK front end toolkit dependencies
@import "../govuk_frontend_toolkit/colours";

details {
  display: block;

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

    @include media(desktop){
      &:hover {
        color: $link-hover-colour;
      }
    }

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

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

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

  // Remove top margin from bordered panel
  .panel-indent {
    margin-top: $gutter-half;
    margin-bottom: 0;
  }
}

Fix details element on iOS 8.4.1
Fix details element on iOS 8.4.1

Mobile Safari on iOS 8.4.1 sees the :hover state on the summary element
as an attempt to implement a drop-down menu using CSS so applies its
hover state emulation[1]. Wrapping this hover style in a desktop media
query prevents the issue from occurring.

[1]: https://coderwall.com/p/bevnew/reset-ios-safari-s-emulated-hover-state