// Refactoring:
// https://github.com/alphagov/govuk_elements/blob/master/public/sass/elements/_details.scss
// details

.gv-c-details {
  display: block;
}

.gv-c-details__summary {
  display: inline-block;
  position: relative;

  margin-bottom: em(5); // todo: use consistent units

  color: $govuk-blue;
  cursor: pointer;

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

  &:focus {
    outline: $width-focus-outline solid $focus-colour;
  }
}

// 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 that’s not using the polyfill 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.

// sass-lint:disable force-element-nesting
// sass-lint:disable force-pseudo-nesting
@-moz-document regexp(".*") {
  .gv-c-details__summary:not([tabindex]) {
    // Allow duplicate properties, override the summary display property
    // sass-lint:disable no-duplicate-properties
    display: list-item;
    display: revert;
  }
}

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

.gv-c-details__arrow {
  // Match fallback arrow spacing with -webkit default
  margin-right: .35em; // todo: use consistent units
  font-style: normal;
}
