/*
 * General styling to make detail/summary tags look a bit more material
 * To get the best out of it you should structure your usage like this:
 *
 * ```html
 * <details>
 *   <summary>Some title</summary>
 *   <div class="details-content">
 *     Some content
 *   </div>
 * </details>
 * ```
 */

details {
  box-shadow: 0 1px 4px 0 rgba($black, 0.37);

  > summary {
    cursor: pointer;
    @include font-size(16);
    position: relative;
    padding: 16px 24px;
    color: $black;
    height: 16px;
    display: block; // Remove the built in details marker in FF
    overflow: hidden;

    &::-webkit-details-marker {
      display: none; // Remove the built in details marker in webkit
    }

    // Rotate the icon
    i.material-icons.expand {
      @include rotate(0deg);

      @at-root #{selector-replace(&, 'details', 'details[open]')} {
        @include rotate(180deg);
      }
    }
  }

  .detail-contents {
    padding: 16px 24px;
  }
}
