/*
Table of Contents Drawer
========================
This contains all of the styles specific to the TOC
*/

.toc-nav__base {
  padding-top: 40px;

  // Used in Notice & Comment, which displays Federal Register Notices
  &.toc-nav__fr-notice {
    padding: 62px 0 0 10px;

    .toc-item {
      padding: 7px 15px 5px 5px;
      margin-left: 0;
      text-indent: -15px;
    }

    a:link,
    a:visited {
      @include border-bottom-light ($width: 0);
    }

    a:hover,
    a:active,
    .current {
      padding-left: 105px;
      margin-left: -100px;
    }

    .toc-entry-at-1,
    .toc-entry-at-1:hover {
      border-top: 1px solid $panel_border_color;
      @include sans-font-bold;
      margin-left: -100px;
      padding: 9px 0 9px 110px;
    }

    .toc-depth-2 {
      border-top: 1px solid $panel_border_color;
      margin-left: -100px;
      padding: 0 0 0 105px;

      .toc-entry-at-2 {
        padding-top: 5px;
      }

      & > li:first-child .toc-entry-at-2 {
        padding-top: 10px;
      }

      & > li:last-child .toc-entry-at-2 {
        padding-bottom: 10px;
      }
    }

    .toc-depth-3 {
      // to account for the last child padding
      // when there's a nested list
      .toc-entry-at-3 {
        padding-top: 5px;
        padding-bottom: 5px;
      }

      & > li:last-child .toc-entry-at-3 {
        padding-bottom: 10px;
      }
    }
  }

  // Also used in N&C, specifically for displaying changes to the CFR
  &.toc-nav__cfr-changes {
    .toc-nav__divider {
      @include border-top-light ($width: 1px);
    }
  }

  ol {
    margin: 0;
    padding: 0;
  }

  li {
    padding: 0 0 0 10px;
    margin: 0;
    text-indent: 0;
  }

  .toc-section-marker {
    @include regulation-nav-section-marker-font;
    display: block;
  }

  // Interpretation Subparts in the TOC are styled differently
  .toc-interp-heading {
    @include regulation-nav-interp-heading-font;
  }

  .toc-interp-title {
    @include regulation-nav-interp-title-font;
  }

  a {
    display: block;
    padding: 7px 15px 8px 105px;
    margin-left: -100px;
    line-height: 1.3;
  }

  a:link,
  a:visited {
    color: $panel_text_color;
    @include border-bottom-light ($width: 1px);
  }

  a:hover,
  a:active,
  .current {
    margin-left: -100px;
    padding-left: 105px;
    color: $black;
    background-color: $panel_highlight_color;
  }

  /*
  TOC in Diff View
  -----------------
  */

  .modified a,
  .modified a:link,
  .modified a:visited,
  .added a,
  .added a:link,
  .added a:visited {
      border-right: 8px solid $green_light;
  }

  .deleted a,
  .deleted a:link,
  .deleted a:visited {
    border-right: 8px solid $red_light;
    text-decoration: line-through;
    color: $gray;
  }
}

.toc-nav__cfr-viewer, .toc-nav__diffs {
}

// Non-clickable divider in the table of contents
.toc-nav__divider {
  // Negative margin, positive padding to extend borders full width
  margin: 0 0 0 -100px;
  padding: 10px 0 10px 105px;
  display: block;
  line-height: 1.4;
  background-color: $panel_background_color;
  @include border-bottom-light ($width: 1px);
  font-size: 1em;
  text-transform: uppercase;
  color: $gray_darker;
}

// Highlight the History tab in diff view
.active-tab a:link,
.active-tab a:visited,
.active-tab a:hover,
.active-tab a:active {
  color: #d14124;
}


.subpart-subhead {
  @include sans-font-bold;
  text-transform: none;
}

/*
History Drawer
==============
This contains all of the styles specific to the history
*/

.history-drawer {
  @include sans-font-bold;

  ul,
  li {
    @include reset;
  }

  .drawer-content {
    padding-top: 40px;
  }

  .effective-label {
    padding: 0 15px;
    @include sans-font-regular;
    color: $panel_text_color;
  }

  // TODO: unify link styles with TOC

  .version-list {
    border-top: 1px solid $gray_light;
  }

  .status-list {
    border-bottom: 1px solid $gray_light;
  }

  .version-link {
    display: block;
    margin: 0;
    padding: 10px 15px;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  // IE8 only respects the background color on the individual elements
  .current {
    .version-link {
      padding: 10px 15px 0 15px;
      background: $panel_highlight_color;
    }

    .timeline-content-wrap {
      background: $panel_highlight_color;
    }

    .rule-list {
      display: block;
      background: $panel_highlight_color;
    }
  }

  .version-link,
  .version-link:link,
  .version-link:visited {
    color: $black;
    text-decoration: none;
    position: relative;
  }

  .version-link:hover,
  .version-link:active,
  .version-link:target,
  .current {
    color: $black;
    background: $panel_highlight_color;
    display: block;
  }

  h2 {
    @include reset;
    font-size: 0.875em;
    text-transform: uppercase;
    line-height: normal;
  }

  h3 {
    @include reset;
    font-size: 0.875em;
    text-transform: uppercase;
    line-height: normal;
  }

  .final-rule {
    margin: 10px 15px 0 15px;
  }

  .compare-title {
    margin: 10px 15px 0 15px;
    padding-top: 15px;
    border-top: 1px solid $history_drawer_border_color;
  }

  .rule-status {
    color: $panel_text_color;
    text-transform: lowercase;
    @include sans-font-regular;
    display: block;
    float: right;
  }

  .rule-list {
    margin: 0 15px;
    @include sans-font-regular;
  }

  .rule-list li {
    padding: 0 0 0.5em 0;
  }

  .rule-list li:last-child {
    padding-bottom: 0.2em;
  }

  .version-date {
    @include regulation-history-version-date-font;
  }

  .select-content {
    margin: 6px 15px 15px 15px;
  }

  .diff-button-wrapper {
    text-align: center;
    margin-bottom: 1em;
  }
}

.js {
  .timeline-content-wrap {
    display: none;
  }

  .current .timeline-content-wrap {
    display: block;
  }

  /*
  date input
  ----------
  */
  .form-wrap {
    margin: 15px;
    background-color: $white;
    line-height: 32px;
    border-top: 1px solid $gray_light;
    border-bottom: 1px solid $gray_light;
    border-left: 1px solid $gray_light;
  }

  input[type=text] {
    border: none;
    text-align: center;
    line-height: 32px;
  }
  input[name=month],
  input[name=day] {
    width: 15%;
  }

  input[name=year] {
    width: 25%;
  }

  .find-button {
    float: right;
    padding: 0 10px;
    margin-top: -1px;
    margin-bottom: -1px;
    height: 34px;
  }
}

// IE8 refuses to apply the link hovers
.lt-ie9 {
  #history {
    li:hover,
    li.current {
      background-color: $panel_highlight_color;
    }
  }
}

// when ie7 users do visit, the drawer header won't stick out
.lt-ie8 {
  .drawer-header .toc-type {
    width: 210px;
  }
}

.stop-button {
  display: block;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin: 15px;
  background-color: $red;
  padding: 10px;
  text-align: center;
}

.stop-button:link,
.stop-button:visited {
  color: $white;
}

.stop-button:hover,
.stop-button:active,
.stop-button:focus {
  background-color: $red_lightest;
  color: $black;
}

/*
Search Drawer
=============
This contains all of the styles specific to the search
*/

.search-drawer {
  @include reset;

  .drawer-content {
    padding-top: 40px;
  }

  h3 {
    color: $panel_text_color;
    @include sans-font-regular;
    font-size: 0.875em;
    line-height: normal;
    text-transform: none;
    margin-bottom: 0.5em;
  }

  .version-search {
    border-bottom: 2px solid $gray_light;
    padding: 0 15px 20px 15px;
  }

  .search-box {
    border-bottom: 1px solid $gray_light;
    padding: 20px 15px;
  }

  input[type=text] {
    width: 80%;
  }

  button {
    width: 20%;
  }
}

.search-box {
  input {
    height: 32px;
    line-height: 32px;
    margin: 0;
  }

  input[type=text] {
    padding: 0 10px;
    text-align: left;
    border-top: 1px solid $gray_light;
    border-right: none;
    border-bottom: 1px solid $gray_light;
    border-left: 1px solid $gray_light;
  }
}
