@import "../modules/mixins";
@import "../modules/variables";

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code, time,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  @include box-sizing(border-box);
  @include background-origin(padding-box);
}

.webdoc_expression_wrapper {
  position: relative;
  top:0;
  left:0;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  
  font: 62.5%/1.4 'Helvetica Neue', helvetica, arial, sans-serif;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  
  @include transform(translateZ(0));

  -webkit-font-smoothing: antialiased;
}

.clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: " ";
  font-size: 0;
}

.layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  
  @include transition(opacity .15s linear);
}
/* utilities */

.hidden,
.is-hidden {
  display: none !important;
}

.is-invisible {
  visibility: hidden;
  opacity: 0;
}

.is-visible {
  @include transition(opacity 0.16s ease-in);
  visibility: visible;
  opacity: 1;

}

.no-transition {
  @include transition(none !important);
}

.no-select {
  @include user-select(none);
}

/* .index

   Defines styles for lists of inline-blocks like buttons, thumbs or toolbars,
   as well as lists with dividers. Horizontal by default. */

.index {
  margin: 0;
  padding: 0;
  /* Remove default styling from list items. */
  list-style: none;
}

.index > li {
  position: relative;
  /* Specifically remove default margin and padding from
     list items in case some typography rules have added
     these back in after the reset. */
  margin: 0;
  padding: 0;
  /* Make list items act as position parents. */
}


/* .index classes with horizontal layout.

   Simulate a bunch of blocks pushed against each other horizontally
   by using inline-block layout to create a horizontal effect. Because
   they're in the flow, children must have no space between them in
   the html.
*/

.horizontal {
  line-height: 0;
}

.horizontal > * {
  display: inline-block;
  vertical-align: top;
}

.horizontal > *:last-child {
    margin-right: 0;
}

.horizontal > *.last {
    margin-right: 0;
}


.horizontal > input[type='radio'],
.horizontal > input[type='checkbox'] {
    margin-top: 0.25em;
    width: auto;
    height: auto;
}

.horizontal.index > dt,
.horizontal.index > dd {
    margin: 0;
}
.horizontal.index > dt,
.horizontal.index > dd {
    width: 160px;
    line-height: 1.6em;
}
.horizontal.index > dt {
    vertical-align: text-bottom;
}
.horizontal.index > dd {
    margin-top: 1.6667em;
    margin-bottom: 1.6667em;
    margin-left: 0;
    margin-left: -166px;
    vertical-align: text-top;
}

.horizontal.spaced {
  > li:not(:last-child) {
    margin-right: 1em;
  }

  > li.pull-right {
    margin-right: 0;

    + li.pull-right {
      margin-right: 1em;
    }
  }
}


/* .vertical */

.vertical > * {
  display: block;
}

.vertical > *:last-child {
  margin-bottom: 0;
}

.vertical > *.last {
  margin-bottom: 0;
}

.vertical > dt,
.vertical > dd {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: top;
}

.vertical > dt {
  margin-right: 2%;
  width: 36.20%;
  text-align: right;
  /* The golden ratio */
}

.vertical > dd {
  margin-right: 0;
  /* The golden ratio */
  width: 61.80%;
}

.vertical.spaced {
  li:not(:last-child) {
    margin-bottom: 1em;
  }
}

/* spaced children */

.horizontal > .spaced {
  margin: 0 1.3333em;
}

.vertical > .spaced {
  margin: 1.3333em 0;
}

/* Positioning */

.tl, .tr, .bl, .br, .tls, .trs, .bls, .brs { position: absolute; }
.tl, .tr { top: 0; }
.bl, .br { bottom: 0; }
.tl, .bl { left: 0; }
.tr, .br { right: 0; }

.tls, .trs { top: 1em; }
.bls, .brs { bottom: 1em; }
.tls, .bls { left: 1em; }
.trs, .brs { right: 1em; }

/* scroll */
.scroll {
  overflow: auto;
  webkit-overflow-scrolling: touch;
}

.scroll::-webkit-scrollbar {
  border-radius: 12px;
  width: 9px;
  height: 9px;
  background-color: transparent;
}

.scroll::-webkit-scrollbar-thumb:vertical,
.scroll::-webkit-scrollbar-thumb:horizontal {
  border-radius: 12px;
  border: 2px solid white;
  background-color: #888888;
}

.scroll::-webkit-scrollbar-thumb:vertical {
  min-height: 20px;
}

.scroll::-webkit-scrollbar-thumb:horizontal {
  min-width: 20px;
}

.scroll::-webkit-scrollbar-track-piece:disabled,
.scroll::-webkit-scrollbar-button:disabled {
  display: none !important;
}

.x-scroll {
  overflow-y: hidden;
}

.y-scroll {
  overflow-x: hidden;
}

.x-scroll.y-scroll {
  overflow: scroll;
}

.no-scroll {
  overflow: hidden;
}

/* Icons */

.spaced-right::before {
  margin-right: 0.5em;
}

.spaced-left::before {
  margin-left: 0.5em;
}

//* Loading Dots */
.loading_dots {
  width: 110px;
  height: 12px;
  line-height: 12px;
  margin: 16px auto;
  text-align: center;

  span {
    display: block;
    float: left;
    width: 12px;
    height: 12px;
    margin: 0 5px;

    vertical-align: middle;

    background-color: $electric-red;
    border-radius: 50%;
    -webkit-transform: translateZ(0); // Enable GPU
    -webkit-animation: fadin .4s infinite alternate;
       -moz-animation: fadin .4s infinite alternate;
         -o-animation: fadin .4s infinite alternate;
            animation: fadin .4s infinite alternate;

    &:nth-child(2) {
      -webkit-animation-delay: 0.1s;
         -moz-animation-delay: 0.1s;
          -ms-animation-delay: 0.1s;
           -o-animation-delay: 0.1s;
              animation-delay: 0.1s;
    }
    &:nth-child(3) {
      -webkit-animation-delay: 0.2s;
         -moz-animation-delay: 0.2s;
          -ms-animation-delay: 0.2s;
           -o-animation-delay: 0.2s;
              animation-delay: 0.2s;
    }
    &:nth-child(4) {
      -webkit-animation-delay: 0.3s;
         -moz-animation-delay: 0.3s;
          -ms-animation-delay: 0.3s;
           -o-animation-delay: 0.3s;
              animation-delay: 0.3s;
    }
    &:nth-child(5) {
      -webkit-animation-delay: 0.4s;
         -moz-animation-delay: 0.4s;
          -ms-animation-delay: 0.4s;
           -o-animation-delay: 0.4s;
              animation-delay: 0.4s;
    }
  }

  &.absolute {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
  }
}

@-webkit-keyframes fadin {
  0%   { opacity: 1;  }
  100% { opacity: .2; }
}
@-moz-keyframes fadin {
  0%   { opacity: 1;  }
  100% { opacity: .2; }
}
@-ms-keyframes fadin {
  0%   { opacity: 1;  }
  100% { opacity: .2; }
}
@-o-keyframes fadin {
  0%   { opacity: 1;  }
  100% { opacity: .2; }
}
@keyframes fadin {
  0%   { opacity: 1;  }
  100% { opacity: .2; }
}