@import "compass/css3/background-size";
@import "compass/css3/border-radius";
@import "compass/css3/box";
@import "compass/css3/box-shadow";
@import "compass/css3/box-sizing";
@import "compass/css3/images";
@import "compass/css3/text-shadow";
@import "compass/css3/transform";
@import "compass/css3/transition";
@import "compass/css3/user-interface";

@import "variables";
@import "animations";
@import "vendor_prefix_tooltip";
@import "browser_support";

@mixin filter($val) {
  -webkit-filter: $val;
  -o-filter: $val;
  -moz-filter: $val;
  -ms-filter: $val;
  filter: $val;
}

@mixin display-flex() {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

@mixin justify-content($val) {
  -webkit-justify-content: $val;
  -moz-justify-content: $val;
  -o-justify-content: $val;
  -o-justify-content: $val;
  justify-content: $val;
}

@mixin align-items($val) {
  -webkit-align-items: $val;
  -moz-align-items: $val;
  -o-align-items: $val;
  -o-align-items: $val;
  align-items: $val;
}

@mixin flex-direction($val) {
  -webkit-flex-direction: $val;
  -moz-flex-direction: $val;
  -o-flex-direction: $val;
  -o-flex-direction: $val;
  flex-direction: $val;
}

@mixin order($val) {
  -webkit-order: $val;
  -moz-order: $val;
  -o-order: $val;
  -o-order: $val;
  order: $val;
}


@mixin flex($val) {
  -webkit-flex: $val;
  -moz-flex: $val;
  -o-flex: $val;
  -o-flex: $val;
  flex: $val;
}

// -----------------------------------------------------------------------------

::selection {
  color: white;
  background-color: $brand-blue;
  @include text-shadow(none);
}

body {
  // background: url('../../images/bgs/bg-rep.png');

  // &.nobackdrop {
  //   @include background(linear-gradient($gray-1, white 10%, white 90%, $gray-1));
  //   background-color: white;
  //   .backdrop {
  //     opacity: 0;
  //   }
  // }
  @include background(linear-gradient($gray-1, white 10%, white 90%, $gray-1));
  background-color: white;

  // &.weavebg {
  //   background: -webkit-linear-gradient(63deg, rgb(21, 21, 21) 5px, transparent 5px) 0 5px,
  //               -webkit-linear-gradient(243deg, rgb(21, 21, 21) 5px, transparent 5px) 10px 0px,
  //               -webkit-linear-gradient(63deg, rgb(34, 34, 34) 5px, transparent 5px) 0px 10px,
  //               -webkit-linear-gradient(243deg, rgb(34, 34, 34) 5px, transparent 5px) 10px 5px,
  //               -webkit-linear-gradient(0deg, rgb(27, 27, 27) 10px, transparent 10px),
  //               -webkit-linear-gradient(rgb(29, 29, 29) 25%, rgb(26, 26, 26) 25%, rgb(26, 26, 26) 50%, transparent 50%, transparent 75%, rgb(36, 36, 36) 75%, rgb(36, 36, 36));
  //   background: -moz-linear-gradient(63deg, rgb(21, 21, 21) 5px, transparent 5px) 0 5px,
  //               -moz-linear-gradient(243deg, rgb(21, 21, 21) 5px, transparent 5px) 10px 0px,
  //               -moz-linear-gradient(63deg, rgb(34, 34, 34) 5px, transparent 5px) 0px 10px,
  //               -moz-linear-gradient(243deg, rgb(34, 34, 34) 5px, transparent 5px) 10px 5px,
  //               -moz-linear-gradient(0deg, rgb(27, 27, 27) 10px, transparent 10px),
  //               -moz-linear-gradient(rgb(29, 29, 29) 25%, rgb(26, 26, 26) 25%, rgb(26, 26, 26) 50%, transparent 50%, transparent 75%, rgb(36, 36, 36) 75%, rgb(36, 36, 36));
  //   background: -ms-linear-gradient(63deg, rgb(21, 21, 21) 5px, transparent 5px) 0 5px,
  //               -ms-linear-gradient(243deg, rgb(21, 21, 21) 5px, transparent 5px) 10px 0px,
  //               -ms-linear-gradient(63deg, rgb(34, 34, 34) 5px, transparent 5px) 0px 10px,
  //               -ms-linear-gradient(243deg, rgb(34, 34, 34) 5px, transparent 5px) 10px 5px,
  //               -ms-linear-gradient(0deg, rgb(27, 27, 27) 10px, transparent 10px),
  //               -ms-linear-gradient(rgb(29, 29, 29) 25%, rgb(26, 26, 26) 25%, rgb(26, 26, 26) 50%, transparent 50%, transparent 75%, rgb(36, 36, 36) 75%, rgb(36, 36, 36));     
  //   background-color: rgb(19, 19, 19);
  //   @include background-size(20px 20px);
  // }
}

li {
  line-height: 1.2;
}

ol {
  margin-left: 1.2em;
  margin-bottom: 1em;
  position: relative;
  list-style: decimal;

  li {
    margin-bottom: 0.5em;

    ul {
      margin-left: 2em;
      margin-bottom: 0;

      li:before {
        content: '·';
        font-weight: 600;
      }
    }
  }

  ul, ol {
    margin-top: .5em;
  }
}

ul > li::before {
  content: url('../../images/chrome-logo-tiny.png');
  width: 0.5em;
  margin-left: -1.2em;
  margin-top: 3px;
  position: absolute;
}

strong, b, .bold {
  font-weight: bold;
}

em, i {
  font-style: italic;
}

hr {
  border: none;
  @include background(linear-gradient(left, rgba(255, 255, 255, 0), $gray-2 10%, $gray-2 90%, rgba(255, 255, 255, 0)) no-repeat);
  height: 1px;
}

slide.checkbox {
  // ul > li::before {
  //   content: none;
  // }
  &.current {
    span {
      @include transform(scale(1));
    }
  }
  span {
    display: inline-block;
    @extend .pop;
    @include transition-delay(800ms);
  }
  .spacer {
    margin-left: 41px;
    display: inline-block;
  }
}

article.quote {
  color: inherit;

  blockquote {
    font-family: 'Architects Daughter', cursive;
    font-size: 45px;
    line-height: 72px;
    border-left: 10px solid $gray-1;
    position: relative;
    padding-left: 50px;
    text-align: left;

    &:before {
      content: '“';
      position: absolute;
      margin-left: -0.5em;
    }
    &:after {
      content: '”';
      position: absolute;
      margin-left: 0.1em;
    }
  }
}

aside.gdbar {
  @include background(linear-gradient(left, white, rgba(255,255,255,0)) no-repeat);
  @include background-size(0% 100%);
}

img.checkbox {
  width: 32px;
  height: 32px;
  margin-right: 3px;
  vertical-align: middle;
}

// // Promote these elements to their own layer to get hwd accel.
// slide.slide-area,
// slide.backgrop {
//   @include transform(rotateZ(0));
// }

slides > slide {
  //padding: 60px;
  overflow: visible;
  color: $gray-4;

  // &:not(.nobackground) {
  //   &:before {
  //     bottom: 2px;
  //     color: white;
  //   }
  //   &:after {
  //     bottom: 2px;
  //     color: $gray-4;
  //   }
  // }

  &.backdrop {
    display: none !important;
  }

  pre {
    left: initial;
    width: initial;
    padding: 10px;
  }

  // &.backdrop {
  //   @include box-shadow(5px 5px 30px $gray-2);

  //   &:before, &:after {
  //     content: '';
  //     display: block;
  //     @include box-sizing(border-box);
  //     width: 100%;
  //     background: url(../../images/logos/chrome_logo.svg) no-repeat;
  //     @include background-size(150%);
  //     @include filter(grayscale(0.4));
  //     height: 35px;
  //     z-index: -1000;
  //     @include transition(all 600ms ease-in-out);
  //     //@include transition(all 1s cubic-bezier(.17,.67,0,1.75));
  //   }
  //   &:before {
  //     background-position: 50% 65%;
  //     left: 0;
  //     bottom: 0;
  //     border-bottom-left-radius: inherit;
  //     border-bottom-right-radius: inherit;
  //   }
  //   &:after {
  //     right: 0;
  //     top: 0;
  //     background-position: 50% 35%;
  //     border-top-left-radius: inherit;
  //     border-top-right-radius: inherit;
  //   }
  // }

  hgroup, h2, h3 {
    @include text-shadow(#fff 0px 1px 0px,rgba(0,0,0,0.2) 0 2px 5px);
  }

  hgroup {
    span {
      float: right;
    }

    h2 img,
    h3 img {
      height: 35px;
    }

    .spec, .bug, .radar, .h5r {
      width: 30px;
      height: 30px;
      opacity: 0.2;
      @include transition(opacity 200ms ease-out);
      border-bottom: none;
      background-position: 50% 50%;
      @include background-size(contain);
      background-repeat: no-repeat;
    }

    .bug, .spec {
      background-image: url('../../images/icons/gears.svg');
      display: inline-block;
    }
    .bug {
      background-image: url('../../images/icons/bug.png');

      &.closed {
        background-image: url('../../images/icons/bug_closed.png');
      }
    }
    .h5r {
      // background-image: url('//www.html5rocks.com/static/images/site_title.png');
      background-image: url('../../images/icons/h5r.png');
      display: inline-block;
      opacity: 0.6;
    }
    .radar, .bug:hover, .spec:hover, .h5r:hover {
      opacity: 1;
    }
  }

  .note {
    text-align: left;
  }
}

.highlight hgroup {
  h2, h3 {
    @include text-shadow(0 0 40px white, 0 0 40px white, 0 0 0px white, 0 0 40px white, 0 0 40px white);
    @include filter(drop-shadow(0 0 15px white));
    color: black;
  }
}

.demo {
  text-transform: uppercase;
  padding: 6px 12px 6px 12px;
  text-decoration: none;
  background-color: #759ae9;
  //@include background(linear-gradient(top, $brand-blue 0%, $brand-blue 50%, $brand-blue-secondary 50%, $brand-blue-secondary2 100%));
  @include background(linear-gradient(top, $brand-blue 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%));
  border-top: 1px solid #1f58cc;
  border-right: 1px solid #1b4db3;
  border-bottom: 1px solid #174299;
  border-left: 1px solid #1b4db3;
  @include border-radius(4px);
  @include box-shadow(inset 0 0 2px 0 rgba(57, 140, 255, 0.8));
  color: white;
  @include text-shadow(0 -1px 1px #1a5ad9);
  font-weight: 600;

  &:hover {
    color: white !important;
    @include background(linear-gradient(top, $brand-blue 0%, #376fe0 50%, #242424 50%, #2463de 100%));
  }
}

label {
  &.bad, &.good, &.sortof {
    padding: 8px;
    @include border-radius(50%);
    color: white;
    margin-right: 5px;
    // min-width: 70px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    @include transform(rotateZ(90deg));
    @include box-shadow(-2px 2px 3px 3px rgba(0, 0, 0, 0.25) inset);
    width: 20px;
    height: 20px;

    &:after {
      position: relative;
      left: 2px;
      top: -5px;
    }
  }
  &.bad {
    background-color: $brand-red-secondary;
    &::after {
      content: ':(';
    }
  }
  &.good {
    background-color: $brand-green-secondary;
    &::after {
      content: ':)';
    }
  }
  &.sortof {
    background-color: $brand-yellow-secondary;
    &::after {
      content: ':|';
    }
  }
}

.code-example {
  pre:after {
    content: 'html'; // default to HTML
    background-color: $gray-2;
    right: 0;
    top: 0;
    position: absolute;
    font-size: 16pt;
    color: white;
    padding: 2px 25px;
    text-transform: uppercase;
  }

  &.html {
    pre:after {
      content: 'html';
    }
  }

  &.js {
    pre:after {
      content: 'js';
    }
  }
}

.component-demo {
  @extend .host;
  padding: 7px 0 !important;
}

.smaller {
  ul > li::before { 
    margin-top: 1px;
    margin-left: -1.4em;
  }

  [data-tooltip]:after {
    font-size: 18px;
  }
}

.underline {
  border-bottom: 4px solid $brand-blue-secondary2;
}

.topmargin {
  margin-top: 3em;
}

.rounded {
  @include border-radius(10px);
}

.grayscale {
  @include filter(grayscale(1));
}

.hidden {
  display: none !important;
}

.previewframe {
  display: block;
  border: none;

  iframe {
    @include user-select(none);
    //@include transform(scale(1));
    pointer-events: none;
  }
}

.source {
  &.right {
    left: -moz-initial;
    left: initial;
    right: $slide-left-right-padding;
    bottom: $slide-left-right-padding;
  }
  a {
    color: inherit;
    border: none;
  }
}

.custom-element-snippet {
  font-size: 40px;
}

.snippet-demo {
  @extend .demo;

  position: absolute;
  right: 0;
  bottom: 10px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow: -2px 2px 3px $gray-2;

  &:after {
    content: 'RUN';
  }

  &:hover {
    color: white !important;
  }

  &:active {
    bottom: 8px;
  }
}

.animatedfull {
  img {
    @include experimental-value(height, fill-available);
    width: auto;
  }
}

slide.large {
   article > h2 {
    font-size: 94px;
    line-height: initial;
  }
}

slide.futureweb {
  article > h2 {
    text-shadow: initial;
    line-height: initial;
    font-weight: initial;
    text-align: initial;

    span {
      @include transform(rotateZ(90deg) translateY(-50px));
      display: inline-block;
    }
  }
}

.fail {
  position: relative;
  top: -77%;
  left: -34%;

  h2 {
    line-height: 1;
    position: absolute;
    color: $brand-red;
    font-size: 250px;
    border: 15px solid $brand-red;
    padding: 20px 50px 40px 50px;
    border-radius: 20px;
    @include transform(rotateZ(-25deg) scale(1));
    text-transform: uppercase;
    box-shadow: 0 0 75px darkred inset;
    background: rgba(205,0,0,0.5);
    text-shadow: 5px 5px 10px darkred;
    @include transition(all 600ms cubic-bezier(.17,.67,0,1.25));
    opacity: 1;
    @include user-select(none);
    pointer-events: none;

    &.to-build {
      @include transform(rotateZ(-45deg) scale(5));
      opacity: 0;
    }
  }
}

#who {
  a {
    border: none;
  }
  .avatar {
    float: right;
    background: url(https://lh6.googleusercontent.com/-0W5UECRQxqc/TrIv9fqjOaI/AAAAAAAACns/6Hm7wJfJKz8/IMG_20111031_121123.jpg?sz=500) -10px -50px no-repeat;
    width: 365px;
    height: 450px;
  }
  img {
    vertical-align: middle;
    margin-right: 10px;
    max-height: 60px;
    width: auto;
  }
}

slide.title-slide {
  padding: 0;

  // background: url(../../images/polymer/architecture-diagram.svg) no-repeat;
  // background-size: 65%;
  // background-position: -290px 50%;

  // &:after {
  //   content: '';
  //   background: url(../../images/io2013/google-io-lockup-1.png) no-repeat 100% 50%;
  //   @include background-size(contain);
  //   position: absolute;
  //   //bottom: $slide-top-bottom-padding + 40;
  //   bottom: 225px;
  //   right: 60px;//$slide-top-bottom-padding;
  //   width: 200px;
  //   height: 60px;
  // }

  // &.current ~ .backdrop {
  //   &:before, &:after {
  //     @include background-size(150%);
  //     @include filter(grayscale(0.5));
  //   }
  //   &:before {
  //     background-position: 50% 65%;
  //     height: 30%;
  //   }
  //   &:after {
  //     background-position: 50% 35%;
  //     height: 32%;
  //   }
  // }

  @include user-select(none);

  .overlay {
    background: #fff;
    position: absolute;
    z-index: 100;
    height: 0;
    width: 410px;
    left: 0;
    @include transition(all 300ms ease-in-out);
    &.top {
      top: 75px;
    }
    &.bottom {
      bottom: 0;
    }
  }

  &:active {
    .overlay {
      &.top {
        height: 320px;
      }
      &.bottom {
        bottom: 0;
      }
    }
  }

  [data-config-presenter] {
    margin-top: 30px;
    //display: none;
  }

  .auto-fadein {
    @include transition(opacity 300ms ease-in-out 1s);
  }

  article {
    @include display-flex;
    @include align-items(center);
    //@include justify-content(flex-end);
    @include justify-content(center);
  }
  img {
    height: 175px;
  }

  hgroup {
    bottom: -moz-initial;
    bottom: initial;
    position: relative;
    margin-left: 1em;
    //margin-right: 8em;
    text-align: left;
    margin-bottom: 30px;
    background: white;

    h1 {
      font-size: 90px;
    }

    p {
      margin: 0;
    }
  }
}

slide.yum {

  &.shadow {
    h2 {
      cursor: pointer;
      position: relative;
      //@include filter(drop-shadow(5px 5px 10px #333));
      //box-shadow: 1px 3px 7px #aaa;
      @include text-shadow(5px 5px 10px #777);

      &:before {
        @include transition(all 400ms ease-in-out);
        content: 'Shadow';
        position: absolute;
        top: 26%;
        left: -90%;
        opacity: 0;
      }

      &:hover {
        &:before {
          opacity: 1;
          left: -80%;
        }
        img {
          opacity: 0;
        }
      }
    }
  }

  h2 {
    font-size: 100px;
    text-shadow: none;

    img {
      box-shadow: 5px 5px 10px #777;
      margin-bottom: -8px;
      @include transition(all 400ms ease-in-out);
    }
  }
}
.defintion {
  h2 {
    line-height: 2;
  }
  h3 {
    line-height: 1.5;
  }
}

slide#template-demo {
  output {
    @include display-flex;

    > div {
      padding: 0 10px;
      border-right: 2px solid currentcolor;
    }
  }
}

slide#custom-elements-segue {
  padding: $slide-left-right-padding $slide-left-right-padding * 2;

  h2 {
    font-size: 60px;
    color: $gray-4;
  }
  h3 {
    line-height: 2.8;
  }
  hgroup {
    position: absolute;
    bottom: 175px;
  }
}

// Devtools popup on 'p' press ----------
body.with-notes {
  .devtools {
    @include box-shadow(0 -3px 10px $gray-2);
    @include transform(translateY(0) !important);
  }
}

.devtools { 
  @include transition(all 400ms ease-in-out);
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
}
// ----------

.host {
  border-top: 1px dashed $gray-2;
  border-bottom: 1px dashed $gray-2;
  padding-bottom: 15px;
}

slide#web-has-encapsulation {
  .fail {
    top: -35%;
    left: -40%;
    h2 {
      font-size: 150px;
    }
  }
}

slide#shadow-dom-creating {
  div.cols {
    pre {
      float: left;
      width: 47%;
      padding: 10px;
      left: -moz-initial;
      left: initial;

      &:nth-of-type(1) {
        height: 160px;
      }
      &:nth-of-type(2) {
        margin-left: 40px;
      }
    }
  }
}
#shadow-dom-render {
  .devtools {
    $height: 233px;
    @include transform(translateY($height));
    height: $height;
    background-image: url(../../images/shadow/devtools.png);
  }
}

#shadow-style-control {
  [data-action-resetstyleinheritance],
  [data-action-applyauthorstyles] {
    cursor: pointer;
  }
}

.with-notes {
  #insertion-points2 {
    .auto-fadein {
      //background-position: 0% 100% !important;
      background-position: 50% 0%;
    }
  }
}

#insertion-points2 {
  article {
    margin: 0;
  }
  // .active div {
  //   background-position: 50% 0%;
  // }

  div {
    background-image: url(../../images/shadow/insertion-points.svg);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 85%;
    @include transition(background-position 600ms ease-in-out);
    width: 100%;
    height: 100%;

    &.to-build {
      background-position: 50% 0%;
    }

  }
}

#shadow-dom-insertion-pts-example {
  pre {
    min-height: 217px;
    overflow: hidden;
  }  
}

.unstyled {
  * {
    font: initial;
    font-size: 100px;
    text-shadow: initial;
    color: initial;
    line-height: initial;
    letter-spacing: initial;
    font-weight: initial;
    margin: initial;
    padding: initial;
    text-align: initial;
  }
}

#pseduo-element-styling {
  .input-list > span {
    margin-right: 1em;
  }
  input[type=range].custom {
    -webkit-appearance: none;
    background-color: red;
  }
  input[type=range].custom::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: blue;
    width: 10px;
    height: 40px;
  }
  input[type="range"].custom.bling {
    -webkit-appearance: none;
    @include box-shadow(inset 0 0 10px black);
    border-radius: 50px 5px;
    padding: 5px;
    @include background(linear-gradient(top, $brand-blue 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%));
  }
  input[type="range"].custom.bling::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: white;
    opacity: 0.8;
    width: 20px;
    height: 25px;
    @include box-shadow(3px 3px 5px black);
    border-radius: 50px 5px;
  }
}

slide#insertion-point-api {
  img {
    @extend .pop;
  }
}

slide.browser-support {
  cursor: pointer;
  @include user-select(none);

  &.current {
    & ~ .backdrop {
      opacity: 0;
    }
  }
  hgroup {
    position: absolute;
    // flat
    // bottom: 230px;
    // curve
    bottom: 240px;
    left: 0;
    width: 100%;
    text-align: center;

    h2 {
      font-size: 50px;
    }

    a {
      border: none;
      font-style: italic;
    }
  }
  article {
    margin-top: 0;
    height: 70% !important;
  }
}

slide.thank-you-slide {

  a {
    &:nth-child(1) {
      color: black;
    }
    border-bottom: none;
    color: white;
  }
  
  &.current {
    aside.gdbar {
      @include background(linear-gradient(left, white, white) no-repeat);
      @include background-size(100% 100%);
    }
  }
  aside.gdbar {
    @include background(linear-gradient(left, white, white) no-repeat);
    @include background-size(inherit);
  }
}

#first-slide,
#finito {
  background: -moz-initial;
  background: initial;

  &.current {
    & ~ .backdrop {
      &:before, &:after {
        @include background-size(125%);
        @include filter(grayscale(1));
        height: 50%;
        //@include transition(all 1s ease-in-out);
      }
      &:before {
        background-position: 50% 66%;
      }
      &:after {
        background-position: 50% 32%;
      }
    }
  }
}

// pre .str, code .str { color: #65B042; } /* string  - green */
// pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
// pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
// pre .typ, code .typ { color: #89bdff; } /* type - light blue */
// pre .lit, code .lit { color: #3387CC; } /* literal - blue */
// pre .pun, code .pun { color: #fff; } /* punctuation - white */
// pre .pln, code .pln { color: #fff; } /* plaintext - white */
// pre .tag, code .tag { color: #89bdff; } /* html/xml tag    - light blue */
// pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name  - khaki */
// pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
// pre .dec, code .dec { color: #3387CC; } /* decimal - blue */

// pre.prettyprint, code.prettyprint {
//   color: white;
//   background-color: #444;
// }
