/* Section
---------------------------------------------------------------------------------- */

.source_section {
  //padding-left: rem-calc(25); //layout-spec--inner-padding
  counter-reset: h3;

  @include media(medium-up) {
  // Legacy
  margin-right: 32%; //layout-spec--inner-margin-right

  // New spec page modifier
  .source_page.__spec & { margin-right: 0; }
}

  & > h2:first-child {
    margin-left: -rem-calc(25) !important; //layout-spec--inner-padding

    &:before {
      counter-increment: h2 1;
      content: counter(h2)". ";
    }
  }

  /* Error detection */
  & > h2:not(:first-child) {

    background-color: rgba(250, 0, 0, .2);
    outline: 3px solid red;
    outline-offset: 3px;

    &:after {
      content: " error - duplicate h2 or not first tag in section";
      font-weight: normal;
      color: $black;
    }
  }

  & > h3 {
    position: relative;
    margin: 30px 0 15px -25px;
    margin: 30px 0 15px 0;
    //padding: 0 25px;

    font-size: 16px;
    color: #000;
    font-weight: normal;
    line-height: 1.5;
    font-family: inherit;

    counter-reset: h4;

    &:after {
      content: "";
      border-bottom: 1px dotted $gray-light;
      position: absolute;
      left: 0; right: 0; bottom: -7px;
    }
  }

  & > h3 > span {
    position: relative; z-index: 1;
    display: inline-block;
    padding: 0 5px; background: #fff;

    &:before {
      color: $gray;
      counter-increment: h3 1;
      content: counter(h2)"."counter(h3)". ";
    }
  }

  & > h4 {
    margin: 30px 0 10px;
    padding: 0;
    font-size: rem-calc(12); // font-size-medium
    font-family: $body-font-family;
    color: $black;
    font-weight: normal;
    text-indent: .5ex;
    line-height: 1.5;

    &:before {
      color: $dark-grey;
      counter-increment: h4 1;
      content: counter(h2)"."counter(h3)"."counter(h4)". ";
    }
  }

  & > p {
    margin: 15px 0;
  }

  & > pre {

  }
}

/* Dynamics
-------------------------------------------------- */

/* Everything closed by default */
.source_section {
  position: absolute;
  height: 0;
  width: 0;
  top: -9999px;
  overflow: hidden;

  &.__loaded {
    position: relative;
    height: auto;
    width: auto;
    overflow: visible;
    top: 0;
    margin-top: $page-gap * 3;
  }

  & > script,
  & > style {
    display: none !important;
  }

  body & > * { //body for weihgt
    display: none;
  }

  body & > h2:first-child { //body for weihgt
    display: block;
  }
}

.source_section__open {

  & > *:not(.source_example) {
    display: block;
  }

  & > .source_a_hl {
    display: inline;
  }

  .source_example {
    display: inline-block;
  }

  .spoiler-cont_css_w,
  .spoiler-cont_js_w,
  .spoiler-cont_xml_w {
    display: none !important;
  }

  .source_section_h_expand:after {
    content: "\25BC";
  }

  .source_source-code__show, .source_source-code__static, .source_context.__show {
    display: block !important;
  }

  .source_context {
    display: none !important;
  }
}

/* Header actions */

.source_section > h2:first-child,
.source_section_h {

  position: relative;

  padding: $page-gap $page-gap *2;
  line-height: 28px;
  color: $white;

  background-color: $gray-light;

  font-size: rem-calc(16); //font-size-large
  font-family: $header-font-family;
  font-weight: normal;

  &:hover .source_section_h_expand {
    color: $brand !important; //important to override link style
  }
}

.source_subsection_h {
  background-color: #fff !important;
  padding: 0 5px !important;
}

.source_section_h_expand {
  position: absolute;
  top: 0; left: -20px;

  width: 20px;
  height: rem-calc(48);
  margin: 0 10px 0 0;

  font-size: 12px !important; //override reset styles
  text-decoration: none;
  color: $gray !important; //important to override link style

  &:after {
    content: "\25B6";

    position: absolute;
    top: 0; left: 0;
    width: 100%;

    text-align: left;
    line-height: rem-calc(48);
  }
}

/* /Header actions */

/* /Dynamics */

/* /Section
---------------------------------------------------------------------------------- */