@import "base";

//Colors
@import "highlights";

$light-grey: #ccc;
$foreground: #fcfcfc;

$mi-blue: #4fbbea;

$drawer-width: 400px;

$background-color: white;//#fafafa;


$note-profile-pic-size: 30px;

%one-line-ellipsis{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

@mixin abs-center-div( $width,$height){
  position: absolute;
  width: $width;
  height: $height;
  top: (100% - $height) / 2;
  left: (100% - $width) / 2;

  @include box-sizing(border-box);
}

@mixin pageTurner($position: null, $height: 80px, $width: 40px){
  $background: $light-grey;
  $color: $foreground;

  //Absolute positioning
  @if $position != null{
    position: absolute;
    top: 50%;
    margin-top: -($height);
    @if $position == left{
      left: 0;
    }
    @else if $position == right{
      right: 0;
    }
  }

  text-align: center;

  font-size: $height/2;

  line-height: $height - 10px;
  height: $height;
  width: $width;

  max-width: 7%;

  background: $background;
  color: $color;

  cursor: pointer;

  @include box-sizing(border-box);
  &:hover{
    background: $mi-blue;
  }
}

%note-button{
  border: 2px solid #131313;
  background: none;
  color: #131313;
  padding: 5px 30px;
  font-size: 28px;
  font-family: 'Oswald', sans-serif;

  outline: 0;

  cursor: pointer;

  &:hover{
    border-color: $mi-blue;
    color: $mi-blue;
  }

  &[disabled]{
    color: #ccc;
    border-color: #ccc;
  }

  @include no-select;
}

//Initializers
html{
  height: 100%;
}
body {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.viewport{
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

.mindink-reader-container{
  position: relative;
  display: block;
  height: 100%;
  overflow: auto;
  background: $background-color;
  font-family: 'Oswald', sans-serif;
}

#mindink-reader {
  max-width: 1250px;

  @include abs-center-div(85%, 75%);

  iframe {
    border: none;
  }
}

.mindink-reader-container {

  @include no-select();
  .mindink-logo{
    position: absolute;
    top: 0;
    left: 0;
    margin: 10px;
    cursor: pointer;
    &:hover{
      @include filter(brightness(0.9));
    }
  }
  &.open{
    @include transform(translateX($drawer-width));
  }
  .loading{
    font-size: 50px;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -80px;
  }
  .mindink-overlay {
    position: relative;
    height: 100%;
    width: 100%;
  }
  .next-page {
    @include pageTurner(right);
  }
  .previous-page {
    @include pageTurner(left);
  }

  .progress-bar-mi{
    $height: 30px;
    $fill: #bbb;
    $background: #f3f3f3;

    border-top: shade($fill, 10%) solid 4px;
    border-left: 4px solid shade($fill, 10%);

    background: $background;

    height: $height;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    @include box-sizing(content-box);

    .chapter-control{
      position: absolute;
      font-size: $height*0.5;
      margin: $height * 0.15;
      padding: $height * 0.1;
      bottom:0;
      color: #d6d6d6;
      display: inline-block;
      cursor: pointer;

      @include transition(color 0.5s);

      &.filled{
        color: white;
        background: rgba($fill, 0.3);
      }
      &.previous-chapter{
        left: 0;
      }
      &.next-chapter{
        right: 0;
      }
    }

    .bar{
      height: $height;
      background: $fill;
      width: 0%;
      @include transition(width 0.5s);
    }
  }

  .drawerControls {
    width: 30px;
    height: 30px;
    color: black;
    background: white;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
  }

}

.chapter-drawer {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 0;
  height: 100%;
  display: inline-block;
  .drawer {
    @include box-shadow(inset -2px 0 10px 0px rgba(0,0,0,0.02));
    @include box-sizing(border-box);
    width: $drawer-width;
    padding: 30px;
    overflow: hidden;
    display: inline-block;
    min-height: 100%;
    background: $background-color;

    img {
      height: auto;
      max-width: $drawer-width/2;
      display: block;
      @include box-shadow(0 3px 10px 0px rgba(0,0,0,0.2));
    }
    h2{
      font-weight: 100;
      font-size: 16px;
      color: #7c7c7c;
      &:hover{
        color: $mi-blue;
      }
      &.current{
        color: #131313;
      }
    }
  }
  &.open{
    width: 100%;
  }
}

.chapter-slider {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
}

.contextMenu{
  $color: $mi-blue;
  $height: 30px;
  position:absolute;
  margin-top:-($height+10px);

  @include transform(translateX(-50%));

  height: $height;
  background: $color;
  color: white;
  line-height: $height;
  //Removes whitespace when child elements are inline block
  font-size: 0;

  text-align: center;

  @include border-radius(3px);

  i{
    font-size: $height*0.7;
    cursor: pointer;
    width: $height;
    height: $height;
    line-height: $height;
    display: inline-block;
  }

  span.highlight-square{
    width: $height - 10px;
    height: $height - 10px;

    margin: 5px;

    border: 1px solid rgba(0, 0, 0, 0.11);

    border-radius: 5px;

    display: inline-block;
    cursor: pointer;

    &.__mi__remove{
      background: $background-color;
      color: red;
      font-size: $height - 10px;
      line-height: $height - (10px + 5px);
      vertical-align: top;
    }

  }

  i.highlight{
    width: 30px;
    height: 30px;
    background: url('highlight.png') no-repeat;
    background-position: 8px 4px ;
  }

  i.pencil{
    width: 30px;
    height: 30px;
    background: url('pencil.png') no-repeat;
    background-position: 8px 4px;
  }

  &:after{
    content: " ";
    position: absolute;
    left: 50%;
    margin-left: -5px;
    bottom: -10px;
    border: 5px solid transparent;
    border-top: 5px solid $color;
  }
}
.fixed{
  position: fixed !important;
}
.tabletMenu{
  $height: 45px;
  position: absolute;
  bottom: 30px;
  @include transform(translateX(-50%));
  @include border-radius(10px);
  left: 50%;
  height: $height;
  line-height: $height;
  background: $mi-blue;
  width: auto;
  text-align: center;
  font-size: 0;

  i{
    font-size: $height*0.7;
    cursor: pointer;
    width: $height;
    height: $height;
    line-height: $height;
    display: inline-block;
  }

  span.highlight-square{
    width: $height - 10px;
    height: $height - 10px;

    margin: 5px;

    border: 1px solid rgba(0, 0, 0, 0.11);

    border-radius: 5px;

    display: inline-block;
    cursor: pointer;

    &.__mi__remove{
      background: $background-color;
      color: red;
      font-size: $height - 10px;
      line-height: $height - (10px + 10px);
      vertical-align: top;
    }

  }

  i.pencil{
    width: $height;
    height: $height;
    background: url('pencil.png') no-repeat;
    background-position: center;
    background-size: 50%;
  }
}

.ereaderControls{
  @include no-select();

  position: absolute;
  top: 10px;
  right: 10px;

  .close-button, .hide-others-notes-button, .index-button, .note-button, .search-button, .show-others-notes-button{
    background: url(ereader-sprites.png) no-repeat;
    display: inline-block;
    width: 43px;
    height: 43px;
    cursor: pointer;
    position: relative;

    a{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    &:after{
      font-family: 'helvetica', sans-serif;
      font-weight: 300;
      color: $mi-blue;
      position: absolute;
      left:0;
      right: 0;
      bottom: -20px;
      text-align: center;
    }
  }

  .close-button:hover{
    background-position: -152px -102px ;
    &.cancel-text:after{
      content: "Cancel";
    }
    &:after{
      content: "Close";
    }
  }

  .close-button{
    background-position: -103px -103px ;
  }

  .hide-others-notes-button:hover{
    background-position: -51px -103px ;
    &:after{
      content: "Notes";
    }
  }

  .hide-others-notes-button{
    background-position: -2px -102px ;
  }

  .index-button:hover{
    background-position: -152px -53px ;
    &:after{
      content: "Index";
    }
  }

  .index-button{
    background-position: -102px -53px ;
  }

  .note-button:hover{
    background-position: -50px -52px ;

    &:after{
      content: "Notes";
    }
  }

  .note-button{
    background-position: -2px -51px ;
    width: 43px;
    height: 43px;
  }

  .search-button:hover{
    background-position: -151px -4px ;

    &:after{
      content: "Search";
    }
  }

  .search-button{
    background-position: -103px -4px ;
  }

  .show-others-notes-button:hover{
    background-position: -50px -3px ;

    &:after{
      content: "Notes";
    }
  }

  .show-others-notes-button{
    background-position: -3px -3px ;
  }


}

.notes-drawer {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 0;
  height: 100%;
  display: inline-block;


  &.open:after{
    width: $drawer-width;
  }
  &:after{
    content: " ";
    position: fixed;
    top: 0;
    right: 0;
    height: 60px;
    @include box-shadow(inset 0 60px 5px -5px $background-color);
  }

  .drawer {
    @include box-sizing(border-box);
    width: $drawer-width;
    position: absolute;
    top: 0;
    right: 0;
    padding: 30px;
    padding-top: 50px;
    padding-left: 0;
    overflow: hidden;
    display: inline-block;
    min-height: 100%;
    background: $background-color;

//    @include box-shadow(-50px 0px 50px 0px $background-color);

    //This will add the index drawer like the chapter drawer
    //(not sure if this is the right way to go as it is an overlay, not a push)
    // original design was to have the fade as commented out above
    padding-left: 20px;
    @include box-shadow(2px 0 20px 0px rgba(0,0,0,0.05));
    //end added

    h2{
      @include no-select();
      font-weight: 100;
      font-size: 16px;
      line-height: 22px;
      color: #444;
      border-bottom: 1px solid #7c7c7c;

      i{
        float: right;
        color: $light-grey;
      }
    }

    .note{
      position: relative;
      padding-left: $note-profile-pic-size + 10px;
      padding-top: 10px;
      padding-bottom: 10px;

      @include clearfix;

//      &:hover{
//        background: #c7e7f4;
//      }

      .note-avatar{
        position: absolute;
        left: 0;

        width: $note-profile-pic-size;
        height: $note-profile-pic-size;
        border-radius: $note-profile-pic-size/2;
      }

      %note-template{
        font-family: 'Helvetica', sans-serif;
        font-size: 12px;
        font-weight: normal;
        display: block;
      }

      .note-creator{
        @extend %note-template;
        font-family: 'Oswald', sans-serif;
        font-size: 14px;
      }

      .note-subject{
        @extend %note-template;
      }

      .note-content{
        @extend %note-template;
        font-weight: 300;
      }

      time{
        font-size: 10px;
        color: #999;
        display: block;
        float: left;
      }
      .note-action{
        @extend %note-template;
        font-size: 10px;
        color: #999;
        float: right;
        &:hover{
          color: $mi-blue;
        }
      }

    }
  }
  &.open{
    width: 100%;
    .drawer-hide-overlay{
      position: fixed;
      top:0;
      bottom: 0;
      right: 0;
      left: 0;
    }
  }
}

.mi-note-popup-back-fixed{
  position: fixed;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:$background-color;
}
.mi-note-popup{

  $width-left: 250px;
  $width-right: 550px;
  $gutter: 50px;

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;



  .frame{
    padding: 100px 0;

    width: $width-left + $width-right;
    margin: auto;
    min-height: 100%;

    @include transform(translateX(-($width-left/2)));

    .profile-section{
      $size: 100px;

      margin-left: $width-left;
      margin-bottom: 20px;
      height: $size;
      line-height: $size;


      .profile-avatar{
        @include border-radius($size/2);
        width: $size;
        height: $size;
        vertical-align: middle;
        background: shade($background-color, 10%);
        margin-right: 10px;
        margin-left: -10px;
        float: left;
      }

      .profile-title{
        @extend %one-line-ellipsis;
        font-size: $size * 0.4;
        font-family: 'Oswald', sans-serif;
      }




    }

    .book-info{
      margin-right: $gutter;
      width: $width-left - $gutter;
      height: 250px;
      float: left;
      display: block;
      img{
        display: block;
        width: $width-left - $gutter;
        height: auto;
        margin-bottom: 20px;
        @include box-shadow(0 3px 10px 0px rgba(0,0,0,0.2));
      }
    }

    .note-section{
      overflow: hidden;
      display: block;
      font-family: 'Helvetica' sans-serif;
      .note-subject{
        padding: 0;
        color: #131313;
        font-size: 50px;
        font-weight: normal;
        margin-bottom: 20px;

        max-width: 100%;
        border: none;
        background: none;
        height: auto;
      }

      .note-content{
        @include clearfix;

        font-size: 18px;
        font-weight: 300;
        min-height: 150px;
        resize: vertical;
        margin-bottom: 20px;

        display: block; background: none;
        border: none;
        width: 100%;
        max-width: 100%;

        outline: none;

      }
      .social-section{
        border-top: 1px dashed #cccccc;
        padding-top: 10px;

        button{
             margin-left: 5px;
        }
        @include clearfix;
        .post-note{
          @extend %note-button;
          float: right;
          margin: 10px 0 0 10px;

        }
      }

      .reference-section{
        .reference-title{
          @extend %one-line-ellipsis;
          font-family: 'Oswald', sans-serif;
          font-size: 24px;
          font-weight: 500;
          margin: 30px 0;
        }
        .reference-content{
          font-family: 'Helvetica', sans-serif;
          font-size: 18px;
          font-style: italic;
          font-weight: 300;

          margin: 20px 0;
        }
      }
    }



  }
}