// Bright theme for Shower HTML presentation engine: github.com/shower/shower
// Copyright © 2010–2013 Vadim Makeev, pepelsbey.net
// Licensed under MIT license: github.com/shower/shower/wiki/MIT-License

@import 'defaults';
@import 'fonts';
@import 'reset';

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-success, .text-green { color: $greenDark; }
.text-alert, .text-red { color: $redDark; }
.text-info, .text-blue { color: $blueDark; }
.text-purple { color: $purpleDark; }
.text-bluegreen { color: $bluegreenDark; }
.text-orange { color: $orangeDark; }
.bg-black       { background-color: black !important;          }
.bg-white       { background-color: white !important;          }
.bg-blue        { background-color: $blueDark !important;      }
.bg-bluegreen   { background-color: $bluegreenDark !important; }
.bg-gray        { background-color: $grayDark !important;      }
.bg-red         { background-color: $redDark !important;       }
.bg-green       { background-color: $greenDark !important;     }
.bg-orange      { background-color: $orangeDark !important;    }
.bg-purple      { background-color: $purpleDark !important;    }

@-webkit-keyframes blink {
  0% {opacity: 1;}
  49% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 0;}
}
@keyframes blink {
  0% {opacity: 1;}
  49% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 0;}
}

body {
  font:30px/2 'Open Sans', sans-serif;
  counter-reset: problem 0;
}
a {
  text-decoration:none;
}

// Caption
// -------------------------------
.caption {
  display:none;
  margin:0 0 60px;
  padding:0 50px 0 0;
  color:#555;
  h1 {
    font:50px 'Open Sans', sans-serif;
    font-weight: lighter;
  }
  a {
    color:$linkColor;
    &:hover {
      border-bottom:0.1em solid;
    }
  }
}

// Badge
// -------------------------------
.badge {
  position:absolute;
  top:0;
  right:0;
  display:none;
  overflow:hidden;
  visibility:hidden;
  width:11em;
  height:11em;
  line-height:2.5;
  font-size:15px;
}
.badge a {
  position:absolute;
  bottom:50%;
  right:-50%;
  left:-50%;
  visibility:visible;
  background:$color;
  color:#FFF;
  text-align:center;
  -webkit-transform-origin:50% 100%;
  -moz-transform-origin:50% 100%;
  transform-origin:50% 100%;
  transform:rotate(45deg) translateY(-1em);
}

@mixin inner-div {
  // Inner
  > div {
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    padding:$top $right $bottom $left;
    width:$width - $left - $right;
    height:$height - $top - $bottom;
  }
}

// Slide
// -------------------------------
.slide {
  position:relative;
  width:$width;
  height:$height;
  background:#FFF;
  color:#000;
  -webkit-print-color-adjust:exact;
  -webkit-text-size-adjust:none;
  -moz-text-size-adjust:none;
  -ms-text-size-adjust:none;
  @include inner-div;
  // Number
  &:after {
    font-family: 'Open Sans', sans-serif;
    font-weight: lighter;
    position:absolute;
    right:$right;
    bottom:15px;
    color:$color;
    content:attr(data-slide)' / 'attr(data-slides);
    line-height:1;
    font-size: 17px;
  }
  // Debug
  .debug & {
    background-image:url(../images/grid-#{$ratio}.svg);
  }
}

// Elements
// -------------------------------
.slide {
  // Header
  hgroup {
    margin: ($top * -1) ($right * -1) 28px ($left * -1);
    padding: $top $right 20px $left;
    background-color: $color;
    color: white;
    position: relative;
    min-height: 20px;
    h1 {
      float: right;
      font:30px/1 'Open Sans', sans-serif;
      font-weight: lighter;
      text-transform: uppercase;
      color: lighten($color, 60%);
    }
    h2 {
      font:44px/1 'Open Sans', sans-serif;
      font-weight: lighter;
    }
  }
  h3 {
    margin-bottom: 28px;
    font:28px/1 'Open Sans', sans-serif;
    font-weight: lighter;
  }
  &.chapter {
    h2 {
      text-transform: uppercase;
    }
  }
  hr {
    border: none;
    background-color: $color;
    height: 0.1em;
    margin:0 0 28px;
  }
  // Text
  p {
    margin:0 0 28px;
    &.pause {
      margin: 0;
    }
  }
  a {
    border-bottom:0.1em solid;
    color:$linkColor;
  }
  b, strong {
    font-weight:bold;
  }
  i, em {
    font-style:italic;
  }
  kbd, code, samp {
    background:rgba(#000, 0.1);
    tab-size:4;
    line-height:1;
    font-family: 'Inconsolata', monospace, sans-serif;
    &.inline {
      padding:2px 7px;
    }
  }
  blink {
    -webkit-animation: blink 1.0s infinite;
    animation: blink 1.0s infinite;
  }
  mark {
    padding-left: 5px;
    padding-right: 5px;
    color: $color;
    cursor: default;
    background-color: white;

    @mixin background($color) {
      &.#{$color} {
        @extend .bg-#{$color};
        color: white;
      }
    }
    @each $color in "blue" "bluegreen" "gray" "red" "green" "orange" "purple" {
      @include background($color);
    }
    &.success { @include background(green); }
    &.alert { @include background(red); }
    &.info { @include background(blue); }
  }
  // Quote
  blockquote {
    font-style:italic;
    margin: 80px;
    &:before {
      position:absolute;
      margin:-50px 0 0 -70px;
      color:#DDD;
      content:'\201C';
      font: 200px/1 'PT Sans', sans-serif;
      line-height:1;
      font-size:200px;
    }
    p:last-child {
      margin:-28px 0 28px;
      font-style:italic;
      font-weight:bold;
      &:before {
        content: '';
        //width: 0px;
        position: relative;
        top: 0.75em;
        border-top: 2px solid $grayLight;
        color: $grayLight;
        padding-right: 20px;
        margin-right: 15px;
      }
    }
  }
  // Images
  @import 'figure';
  // Lists
  ol, ul {
    margin:0 0 28px;
    counter-reset:list;
    ol, ul { // inner list
      margin:0 0 0 2em;
    }
    li {
      text-indent:-2em;
      &.divider {
        border-bottom: 1px solid;
        height: 0;
        margin: 0.2em 0;
        // opacity: 0.7;
        &:before {
          content: '';
        }
      }
      &:before {
        display:inline-block;
        width:2em;
        color:$listItemColor;
        font-weight: normal;
        text-align:right;
      }
    }
    &.border-separated {
      li {
        &:before {
          content: '';
        }
        border-bottom: 2px solid lighten($color, 10%);
        &:first-child {
          border-top: 2px solid lighten($color, 10%);
        }
      }
    }
  }
  ul > li:before {
    content:'\2023\00A0\00A0\2009';
  }
  ul > li:lang(ru):before {
    content:'\2014\00A0\2009';
  }
  ol > li:before {
    counter-increment:list;
    content:counter(list)'.\00A0\2009';
  }
  dl {
    margin: 0 0 28px;
    dt {
      font-weight: bolder;
      float: left;
      width: 180px;
      clear: left;
      text-align: right;
      margin-right: 10px;
    }
    dd {
      margin-left: 200px;
    }
  }
  &.small {
    hgroup {
      padding-top: 20px;
    }
    pre {
      font-size: 19px;
      min-height: 23px;
      code {
        line-height:1.3em;
        &:before {
          line-height: 1.6em;
        }
      }
    }
  }
  // Code
  pre {
    margin:0 -10px 28px;
    margin-left: ($left * -1);
    counter-reset:code;
    background-color: $colorCode;
    white-space:normal;
    font-size: 26px;
    padding: 0px 5px;
    padding-left: $left;
    min-height: 33px; // one line
    white-space:pre-wrap;
    position: relative;
    code {
      display:block;
      position: relative;
      line-height:1.5;
      background-color: transparent;
      &:before {
        position:absolute;
        margin-left:-40px;
        font-size: 0.8em;
        line-height: 2.0em;
        vertical-align: middle;
        color: darken($colorCode, 25%);
        counter-increment:code;
        content:counter(code, decimal-leading-zero);
      }
      &:only-child {
        font-size: 30px;
        &:before {
          content:'';
        }
      }
    }
    &:after {
      background-color: $color;
      color: lighten($color, 60%);
      right: 0;
      top: 0;
      position: absolute;
      font-size: 16px;
      line-height: 25px;
      padding: 0px 15px;
      text-transform: uppercase;
    }
    &[data-lang]:after {
      content: attr(data-lang);
    }
  }
  // Table
  table {
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    margin:0 0 28px;
    width:100%;
    border-collapse:collapse;
    border-spacing:0;
    th, td {
      padding:0px 10px;
      border-bottom:1px solid $color;
    }
    th {
      color:white;
      background-color:$color;
    }
    &.striped {
      tr:nth-child(even) {
        background:mix($color, #FFF, 8%);
      }
    }
  }
  // iframe
  img, iframe {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    // max-height: 440px;
    max-height: 580px;
    max-width: 850px;

    &.inline {
      position: initial;
      transform: none;
    }
  }
  iframe {
    box-shadow: 3px 3px 7px rgba(#000, 0.3);
    border: 1px solid darken(#fff, 10%);
    width: 100%;
    height: 100%;
  }
  iframe::-webkit-scrollbar {
    display: none;
  }
  // Cover Shout
  &.cover,
  &.shout {
    z-index:1;
    &:after {
      content:'';
      border: none;
    }
    h1 {
      display: none;
    }
    h2 {
      //color: white;
      border: none;
    }
    code {
      color: white;
      font-size: 0.8em;
      padding: 20px;
      background-color: rgba(#000, 0.3);
      box-shadow: inset 0 0 10px rgba(#000, 0.33);
      text-shadow: 0 0 10px rgba(#000, 0.33);
    }
    footer {
      display: none;
    }
  }
  // Cover
  &.cover {
    background:#000;

    hgroup {
      background-color: transparent;
    }

    // Inner
    > div {
      position:absolute;
      top:0;
      left:0;
      overflow:hidden;
      padding:0;
      width:$width;
      height:$height;
    }
    .border-info {
      padding: 60px 0px;
      font:38px/1 'Open Sans', sans-serif;
      font-weight: lighter;
      background-color: $color;
      color: white;
      width: 36%;
      height: $height;
      position: relative;
      box-sizing: border-box;

      h1 {
        font: 500 46px/1 'Open Sans';
        display: block;
        margin-bottom: 0.6em;
      }
      h2 {
        font-size: 28px;
        margin-bottom: 0.6em;
        vertical-align: middle;
        line-height: 38px;
      }

      p {
        padding-left: 50px;
        padding-right: 50px;
      }

      .vcenter {
        height: 460px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-pack: center;
      }
      ul {
        width: 100%;
        margin: 0;
        li {
          padding: 0.5em 50px;
        }
      }
    }
    .left-33 {
      @extend .border-info;
      width: 36%;
    }
    .right-33 {
      @extend .border-info;
      width: 36%;
      left: 64%;
    }
    .left-50 {
      @extend .border-info;
      width: 50%;
    }
    .right-50 {
      @extend .border-info;
      width: 50%;
      left: 50%;
    }
    @mixin cover {
      img, svg, video,
      object, canvas, iframe {
        @content;
      }
      iframe, img {
        max-height: none;
        max-width: none;
      }
      iframe {
        z-index: 0;
      }
    }
    @include cover {
      position:absolute;
      top:0;
      left:0;
      z-index:-1;
    }
    &.w {
      @include cover {
        top:50%;
        width:100%;
        transform:translateY(-50%);
      }
    }
    &.h {
      @include cover {
        left:50%;
        height:100%;
        transform:translateX(-50%);
      }
    }
    &.w.h {
      @include cover {
        top:0;
        left:0;
        transform:none;
      }
    }
  }
  &.noheader {
    hgroup {
      display: none;
    }
  }
  &.huge {
    background:$color;
    hgroup {
      position: initial;
      background-color: transparent;
    }
    h1 {
      visibility: hidden;
    }
  }
  // Shout
  &.shout {
    @extend .huge;
    h2 {
      position:absolute;
      top:50%;
      left: 128px;
      color:#FFF;
      font-size:100px;
      transform:translateY(-50%);
      border-bottom: none;
      z-index: 1;
      a {
        border-bottom:none;
        color:#FFF;
      }
    }
    p {
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      color: #FFF;
      transform:translateY(-50%);
      font-size: 100px;
      line-height: 1em;
      text-align: center;
      border: none;
      padding: 20px;
      font-family: 'Open Sans';
      font-weight: lighter;
      text-shadow: 0px 0px 5px rgba(#000, 0.2);
    }
  }
  &.chapter {
    @extend .shout;
    @extend .w;
    h2 {
      padding: 20px;
      padding-right: 1em;
      //margin-left: 250px;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      background-color: rgba($color, 0.8);
      right: 0;
    }
  }
  &.chapter-html {
    @extend .shout;
    p {
      font-size: 4.5em;
      text-align: left;
      left: 10%;
    }
    .tag {
      top: 3.2em;
      font-size: 3em;
      opacity: 0.3;
      text-shadow: none;
      text-transform: lowercase;
    }
    .title {
      top: 3em;
    }
  }
  &.problem-solution {
    @extend .shout;
    h2 {
      left: 0;
      right: 0;
      text-align: center;
      text-transform: uppercase;
      top: 33%;
      font-size: 2.8em;
      opacity: 0.5;
      letter-spacing: 0.1em;
      font-style: italic;
      &:before {
        content: '#'counter(problem);
        font-weight: 700;
        margin-right: 0.5em;
      }
    }
    .solution {
      position: absolute;
      padding: 100% 0;
      background-color: $bluegreenDark;
    }
  }
  &.problem {
    @extend .problem-solution;
    @extend .bg-red;
    h2 {
      &:before {
        counter-increment: problem;
      }
    }
  }
  &.solution {
    @extend .problem-solution;
    @extend .bg-bluegreen;
  }
  &.section {
    @extend .cover;
    @include inner-div;
    @extend .w;
    hgroup {
      background-color: $color;
    }
    h2 {
      background-color: rgba($color, 0.8);
    }
  }
  &.img-place-middle {
    img {
      @extend .place;
      margin-top: 50px;
    }
  }
  .col {
    position: relative;
    li {
      margin-left: 2em;
      text-indent: -2em;
    }
    img {
      position: initial;
      transform: none;
    }
  }
  .col2 {
    @extend .col;
    -webkit-columns: 2;
    -moz-columns: 2;
  }
  .col3 {
    @extend .col;
    -webkit-columns: 3;
    -moz-columns: 3;
  }
  .col4 {
    @extend .col;
    -webkit-columns: 4;
    -moz-columns: 4;
  }
  // Place
  .place {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    &.t.l, &.t.r, &.b.r, &.b.l {
      transform:none;
    }
    &.t, &.b {
      transform:translate(-50%, 0);
    }
    &.l, &.r {
      transform:translate(0, -50%);
    }
    &.t, &.t.l, &.t.r {
      top:0;
    }
    &.r {
      right:0;
      left:auto;
    }
    &.b, &.b.r, &.b.l {
      top:auto;
      bottom:0;
    }
    &.l {
      left:0;
    }
  }
  //Boxes
  @import 'box';
  // Footer
  footer {
    font-family: 'Open Sans', sans-serif;
    font-weight: lighter;
    position:absolute;
    left: 0;
    right:0;
    bottom: 5px;
    text-align: left;
    padding: 10px $right 10px $left;
    color:$gray;
    line-height:1;
    font-size: 17px;
  }
}

.slide.title {
  color: $grayDark;
  font-size: 70px;
  font-weight: 700;
  font: 100 50px/1.4 'Open Sans',sans-serif;

  hgroup {
    background-color: $color;
  }

  dl {
    font: 100 30px/1.6 'Open Sans', sans-serif;
  }

  > div {
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    padding:$top $right $bottom $left;
    width:$width - $left - $right;
    height:$height - $top - $bottom;
  }

  footer {
    display: block;
  }

  hgroup {
    margin-bottom: 0;

    h1, h2 {
      text-transform: none;
      color: white;
      float: none;
      font: 300 59px/1.3 'PT Sans Narrow',sans-serif;
      visibility: visible;
      display: block;
      position: relative;
      left: 0;
      right: 0;
    }
  }

  p {
    font: 30px/1.6 'Open Sans', sans-serif;
    color: $grayDark;
    margin: 30px 0;

    &.date {
      font-family: 'Open Sans', sans-serif;
      font-size: 16px;
    }
  }
}

// Screen
@media screen {
  @import 'list';
  @import 'full';
}