// Details
// ==========================================================================

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: underline;
  }

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

}

// Details
// ==========================================================================

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: underline;
  }

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

}

// Show the summary arrow in Firefox
// The current Firefox implementation uses display: list-item to show the arrow marker.
// We want to use display: inline-block to shrink-wrap the focus outline around the text.
// This will turn off inline-block for Firefox only.
// @-moz-document is going away: https://bugzilla.mozilla.org/show_bug.cgi?id=1035091 .
// Hopefully they’ll fix <summary> first but if not it’ll fall back to no arrow:
// https://bugzilla.mozilla.org/show_bug.cgi?id=1270163
// If Mozilla add display: revert and remove list-item from summary then this will fall through.
@-moz-document regexp('.*') {
  details summary {
    display: list-item;
    display: revert;
  }
}

Fix the summary arrow in recent Firefox
Fix the summary arrow in recent Firefox

This is a pretty hacky fix so I’ve tried to describe it as accurately as possible in the comments. It can be removed if either of the following happens:

* Mozilla fixes their summary arrow with display: inline-block
* Mozilla remove their support for @-moz-document

Fixes https://github.com/alphagov/govuk_elements/issues/221