/*
Regulation Drawer
=========================
* drawer.scss contains and imports styles for the left-hand navigation drawer
* On large displays it is on the screen by default.
* It can be toggled with the "open" and "close" classes.
*/

// Universal drawer styles
.panel {
  background-color: $panel_background_color;
  border-right: 2px solid $panel_border_color;
  @include sans-font-regular;
  font-size: 1em * $sans_font_scale_factor;
  overflow-y: scroll; // allow content to be scrollable
}

.toc-head {
  border-right: 2px solid $panel_border_color;
  transition: 0.1s;

  a:link,
  a:visited {
    color: $gray_darker;
    text-decoration: none;
    height: 33px;
  }

  a:active,
  a:hover,
  a.current {
    background-color: $white;
    color: $primary_color;
    height: 34px;
  }

  a:hover:not(.current) {
    height: 33px;
  }

  svg {
    height: 15px;
    fill: $gray_darker;
  }
  .current svg {
    fill: $primary_color;
  }
}

/*
Drawer Behavior
===============

* The default state of the drawer is open on large screens
* In the default state the `close` class closes the drawer
* Browsers with resolutions below 1100px wide will default to a closed drawer

Drawer default state
==================== */

// Panel Header
.drawer-header {
  position: fixed;
  background-color: $white;
  border-right: 2px solid $panel_border_color;
  border-bottom: 1px solid $panel_border_color;
  z-index: 100;

  .toc-type,
  .toc-subheader {
    position: relative;
    margin: 0;
    width: 238px;
    height: 40px;
    line-height: 40px;
    border-bottom: none;
    padding: 0 15px;
  }

  .toc-subheader {
    line-height: 5px;
    height: 22px;
  }

  h2 {
    color: $primary_color;
    font-size: 0.875em;
    text-transform: uppercase;
    font-weight: bold;
    @include sans-font-bold;
  }

  h3 {
    color: $primary_color;
    @include sans-font-regular;
    font-size: 0.875em;
    text-transform: capitalize;
  }
}

/*
Panel Slide Button
------------------
.panel-slide toggles the drawer open and closed  */

.panel-slide {
  display: block;
  height: 34px; // match height of main header
  line-height: 34px;
  width: $closed_drawer_width;
  float: right;
  cursor: pointer;
  text-align: center;
  font-size: 1.2em;

  // use an image for IE7 and browsers that don't support @font-face
  .lt-ie8 &,
  html.no-fontface & {
    background: url('../img/left.png') center center no-repeat;
    color: transparent;
  }

  .close & {
    border-bottom: 1px solid $panel_border_color;

    svg:first-child {
      display: inline-block;
    }

    svg:last-child {
      display: none;
    }

    .lt-ie8 &,
     html.no-fontface & {
      background: url('../img/right.png') center center no-repeat;
      color: transparent;
    }
  }

  // use the icon font for the drawer toggle arrow in browsers that support it
  svg:first-child {
    display: none;
  }

  svg:last-child {
    display: inline-block;
  }
}

/*
TOC Nav Links
-------------
.toc-nav-links toggle between the types of drawer content
currently these are TOC, History, and Search
*/

.toc-nav-link {
  display: inline-block;
  zoom: 1;
  height: 100%;
  padding: 0;
  margin: 0;
  width: 56px;
  text-align: center;
  background-color: $panel_background_color;
  color: $panel_text_color;

  &.current {
    background-color: $white;
    border-bottom: none;
  }

  .close & {
    display: block;
    border-right: none;
    width: $closed_drawer_width - 1;
  }

  // Fall back to PNG images for drawer icons when @font-face isn't supported
  .cf-icon {
    html.no-fontface & {
      background-size: 20px;
      color: transparent;
    }
  }

  .cf-icon-search {
    html.no-fontface & {
      background: url('../img/search.png') center center no-repeat;
    }
  }

}

.close {
  .toc-nav-link {
    &.current {
      background-color: $white;
      border-bottom: none;
    }
  }

  .toc-nav-link:hover {
    background-color: $panel_background_color;
    border-bottom: none;
  }
}

.menu-tab {
  @include sans-font-bold;
  color: $black;
}

// align the drawer toggle list
.drawer-toggles {
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  width: 200px;

  .close & {
    position: absolute;
    width: $closed_drawer_width;
    top: 33px;
    border-top: 1px solid $panel_border_color;
    right: 0;
    left: 198px;
  }
}

.drawer-toggles li {
  display: inline-block;
  zoom: 1;
  margin-left: -4px;
  border-right: 1px solid $panel_border_color;
  border-left: 1px solid $panel_border_color;

  .close & {
    margin-left: 0;
    display: list-item;
    border-bottom: 1px solid $panel_border_color;
    border-right: none;
  }
}

// Drawer default closed state
.panel.close {
  left: -200px;
  // Header, subheader, 3 TOC list items + 1px drawer-toggles border
  top: $mainhead_height + $subhead_height + 3 * 34px + 1;
  overflow-y: hidden;

  // slide content fully offscreen
  .drawer-content {
    position: absolute;
    left: -999px;
  }

  .drawer-header {
    left: -260px; // 60px extra to accomodate for stacked buttons

    .toc-type {
      display: none;
    }
  }
}

.close .toc-head {
  left: -200px;
  margin-right: 15px;
  height: 150px; // extra height for TOC toggle buttons
}
