// 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;
  clear: both;

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

}

Clear floats on details elements
Clear floats on details elements

When a details element follows a floated element its height consumes the height of the floated element. Clear floats for details elements to solve this (which matches panel styling).
