@import 'variables';
@import 'bourbon';

.sidebar {
  right: 0;

  md-tab-content {
    overflow-x: hidden;
  }

  .md-tab {
    font-size: 24px;
    padding: 12px 0;
    width: 56px;

    .icon-toc {
      font-size: 28px;
      line-height: 24px;
    }
  }

  md-tabs-wrapper {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(0, 0, 0, 0.1);
    border-style: solid;
    border-width: 1px 0 0;
  }

  md-ink-bar {
    top: 0;
  }
}

.sidebar__header {
  background-color: rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}

.sidebar__header-text {
  font-size: 21px;
  margin-left: 20px;
}

.sidebar__close-btn {
  color: rgba(0, 0, 0, 0.54);
  font-size: 26px;
  line-height: 34px;
  margin: 5px;
  padding: 0;
  width: 34px;
}

$menu-height: 94px;
$menu-width: 34px;

.editor-layout {
  z-index: 3;

  .navbar {
    background-color: #fff;
    height: auto;
    padding-left: 1030px;
    padding-right: 944px;
  }

  .navbar__btns {
    display: inline-block;
    margin-left: 20px;
    vertical-align: bottom;
  }

  .navbar__side-btns {
    margin-top: 8px;
    position: absolute;
    right: 0;
    top: 100%;
  }

  .navbar__btn,
  .navbar__side-btn {
    color: rgba(0, 0, 0, 0.54);
    display: inline-block;
    font-size: 28px;
    height: 36px;
    padding: 0;
    width: 36px;

    @include transition(opacity 200ms cubic-bezier(0.75, 0, 0.8, 0.25));

    a {
      line-height: 36px;
    }
  }

  .navbar__side-btn {
    color: rgba(0, 0, 0, 0.35);
  }

  .navbar__side-btn--hidden {
    opacity: 0;
  }

  .navbar__inner {
    font-size: 32px;
    letter-spacing: -0.03em;
    line-height: 1;
    min-height: 44px;
    padding: 4px 0;
    position: relative;
    text-align: right;
    text-transform: uppercase;
  }

  .editor-layout__preview {
    .preview.hidden {
      display: none;
    }
  }

  .menu__scroller {
    overflow: auto;
    overflow-y: scroll;
  }

  .menu__inner {
    color: rgba(0, 0, 0, 0.54);
    font-size: 16px;
    height: auto;
    padding: 40px 40px 60px;

    md-switch {
      margin: 7px 4px 0;
    }
  }

  .menu__entry {
    text-align: center;
  }

  .menu__links {
    font-size: 17px;
    margin: 12px 6px 36px;
  }

  .menu__link {
    border-bottom: 1px solid rgba(0, 0, 0, 0.075);
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    line-height: 1;
    margin-bottom: 6px;
    padding-bottom: 2px;
    text-decoration: none;
  }

  .menu__link-icon {
    color: rgba(0, 0, 0, 0.5);
    font-size: 24px;
  }

  .menu__link-text {
    padding-bottom: 2px;
    width: 100%;
  }

  .file-name {
    font-size: 21px;
  }

  .file-name__input {
    color: rgba(0, 0, 0, 0.67);
  }

  .right-margin__btn {
    color: rgba(0, 0, 0, 0.5);
    height: 30px;
    line-height: 30px;
    margin: 4px;
    padding: 0;
    position: absolute;
    width: 30px;
  }

  .right-margin__btn--close {
    font-size: 27px;
  }

  .right-margin__btn--minimize {
    font-size: 24px;
    top: 34px;
  }

  .right-margin__btn--help {
    bottom: 0;
    color: rgba(0, 0, 0, 0.35);
    font-size: 24px;
  }

  .menu-btn {
    border-style: solid;
    box-shadow: 2px 4px 5px -3px rgba(0, 0, 0, 0.1), 1px 3px 2px -1px rgba(0, 0, 0, 0.07), 0 3px 1px -2px rgba(0, 0, 0, 0.06);
    height: $menu-height;
    top: 74px;
    width: $menu-width;

    @include border-right-radius($tab-border-width);
    @include border-left-radius(0);
    @include border-width(0 $tab-border-width 0 0);
  }

  .menu-btn__button {
    border-radius: 0;
    color: rgba(0, 0, 0, 0.6);
    font-size: 19px;
    height: 100%;
    letter-spacing: 0;
    line-height: $menu-width - $tab-border-width;
    padding: 0;
    position: absolute;
    text-transform: none;
    width: 100%;
  }

  .menu-btn__inner {
    display: inline-block;
    height: $menu-height;
    line-height: 30px;
    width: $menu-width - $tab-border-width;

    @include prefixer(writing-mode, vertical-lr, webkit spec);
  }

  .page {
    z-index: 2; // To hide material sliders

    @include transform-origin(0 100%);
  }

  .page__inner {
    background-color: #fff;
  }

  .page__hole {
    border-radius: 10px;
    box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.14), inset 0 3px 1px -2px rgba(0, 0, 0, 0.12);
    height: 18px;
    left: 18px;
    width: 18px;
  }

  .page__hole--top {
    top: 22%;
  }

  .page__hole--bottom {
    bottom: 22%;
  }

  .page__margin {
    background-color: rgba(255, 216, 210, 0.33);
    left: $editor-margin-width;
    width: 1px;
  }
}
