/* Imports */
@import "variables.scss";

@mixin hidden{
  display: none;
}


@mixin octicon-link($char){
  font: normal normal 1em octicons;
  text-decoration: none;
  color: $color-dark;

  &:before{
    content: $char;
    margin-right: 5px;
  }
}

.workbook{
  /* General external link */
  a[href^="http://"],
  a[href^="https://"] {
    @include octicon-link("\f0b6");
  }

  /* GitHub Links */
  a[href^="https://github.com"],
  a[href^="https://www.github.com"],
  a[href^="https://help.github.com"]
  {
    @include octicon-link("\f008");
  }

  /* GitHub Book Links, Guide Links */
  a[href^="http://git-scm.com/book"],
  a[href^="https://guides.github.com"]
  {
    @include octicon-link("\f007");
  }


  /* YouTube Links */
  a[href^="https://youtube.com"],
  a[href^="https://www.youtube.com"] {
    @include octicon-link("\f0b9");
  }
}

/* Scopes wrapper */

.outline{
  h2{
    & + p,
    & + p ~ p,
    & + p ~ blockquote,
    & + p ~ ul,
    & + p ~ pre,
    & + p ~ h3
    {
      @include hidden;
    }
  }

  h3{
    display: none;

    & + *,
    & > *
    {
      @include hidden;
    }
  }
  h4{
    display: none;

    & + *,
    & > *
    {
      @include hidden;
    }
  }

  pre{
    display: none;
  }
  p{
    display: none;
  }
  ul{
    display: none;
  }
  table{
    display: none;
  }
}

.summary{
  h3{
    display: none;
  }

  h4{
    display: none;

    & + *,
    & > *
    {
      @include hidden;
    }

    & + p + ul
    {
      @include hidden;
    }
  }

  pre{
    display: none;
  }
  p{
    display: none;
  }
  table{
    display: none;
  }
}

.details{
  h3{
    display: none;
  }
  h4{
    display: none;
  }
  table{
    th, td{
      padding: 10px;
    }
  }
}

.booklink, .githublink, .weblink, .videolink {
  font: normal normal 1em octicons;
  text-decoration: none;
  color: $color-dark;

  &:hover {
    color: $color-bright;
  }
}



.summary, .outline, .details{
  h2:before{
    padding: 5px;
    color: #CCCCCC;
    content: "\f078";
    font: normal normal 20px octicons;
  }
}

table, pre{
  background: $mono-light;
  padding: 20px;
  display: block;
}

pre{
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: auto;

  /* To ensure scrolling of long code lines */
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
}

pre:before {
  content: "\f0c8";
  font: normal normal 22px octicons;
  float: right;
  opacity: .4;
}

blockquote{
  width: 80%;
  line-height: 140%;
  margin: 30px 10%;
  text-align: justify;

  &:before{
    content: "\f063";
    font: normal normal 32px octicons;
    position: absolute;
    font-size: 76px;
    opacity: .1;
    left: 0;
    margin-top: -.5em;
  }
  &:after{
    content: "\f063";
    font: normal normal 32px octicons;
    position: absolute;
    font-size: 76px;
    opacity: .1;
    right: 0;
    margin-top: -.25em;

    -ms-transform:rotate(180deg); /* IE 9 */
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
  }
}
