/*! Jazzy - github.com/realm/jazzy

*  Copyright Realm Inc.
*  SPDX-License-Identifier: MIT
*/

//////////////////////////////// // Constants ////////////////////////////////

$bg_color: #414141; $doc_coverage_color: #999; $code_color: #777; $code_bg_color: eee; $link_color: #0088cc; $white_color: fff; $light_gray_bg_color: f2f2f2; $declaration_bg_color: f9f9f9; $sidebar_bg_color: f9f9f9; $declaration_title_language_color: #4b8afb;

$sidebar_width: 230px; $content_wrapper_width: 980px; $content_top_offset: 70px; $content_body_margin: 16px; $content_body_left_offset: $sidebar_width + $content_body_margin; $header_height: 32px; $breadcrumb_padding_top: 12px;

$code_font: 0.95em Menlo, monospace;

$gray_border_color: e2e2e2; $gray_border: 1px solid $gray_border_color; $declaration_language_border: 5px solid cde9f4;

$aside_color: aaa; $aside_border: 5px solid lighten($aside_color, 20%); $aside_warning_color: ff0000; $aside_warning_border: 5px solid lighten($aside_warning_color, 20%);

//////////////////////////////// // Reset ////////////////////////////////

html, body, div, span, h1, h3, h4, p, a, code, em, img, ul, li, table, tbody, tr, td {

background: transparent;
border: 0;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;

}

//////////////////////////////// // Global ////////////////////////////////

body {

background-color: $light_gray_bg_color;
font-family: Helvetica, freesans, Arial, sans-serif;
font-size: 14px;
-webkit-font-smoothing: subpixel-antialiased;
word-wrap: break-word;

}

// Headers

h1, h2, h3 {

margin-top: 0.8em;
margin-bottom: 0.3em;
font-weight: 100;
color: black;

} h1 {

font-size: 2.5em;

} h2 {

font-size: 2em;
border-bottom: $gray_border;

} h4 {

font-size: 13px;
line-height: 1.5;
margin-top: 21px;

} h5 {

font-size: 1.1em;

} h6 {

font-size: 1.1em;
color: $code_color;

} .section-name {

color: rgba(128,128,128,1);
display: block;
font-family: Helvetica;
font-size: 22px;
font-weight: 100;
margin-bottom: 15px;

}

// Code

pre, code {

font: $code_font;
color: $code_color;
word-wrap: normal;

} p code, li code {

background-color: $code_bg_color;
padding: 2px 4px;
border-radius: 4px;

} pre > code {

padding: 0;

}

// Links

a {

color: $link_color;
text-decoration: none;
code {
  color: inherit;
}

}

// Lists

ul {

padding-left: 15px;

} li {

line-height: 1.8em;

}

// Images

img {

max-width: 100%;

}

// Blockquotes

blockquote {

margin-left: 0;
padding: 0 10px;
border-left: 4px solid #ccc;

}

// HRs

hr {

height: 1px;
border: none;
background-color: $gray_border_color;

}

// Footnotes

.footnote-ref {

display: inline-block;
scroll-margin-top: $content-top-offset;

}

.footnote-def {

scroll-margin-top: $content-top-offset;

}

// General Content Wrapper

.content-wrapper {

margin: 0 auto;
width: $content_wrapper_width;

}

//////////////////////////////// // Header & Top Breadcrumbs ////////////////////////////////

header {

font-size: 0.85em;
line-height: $header_height;
background-color: $bg_color;
position: fixed;
width: 100%;
z-index: 3;
img {
  padding-right: 6px;
  vertical-align: -3px;
  height: 16px;
}
a {
  color: $white_color;
}
p {
  float: left;
  color: $doc_coverage_color;
}
.header-right {
  float: right;
  margin-left: 16px;
}

}

breadcrumbs {

background-color: $light_gray_bg_color;
height: $content_top_offset - $header_height - $breadcrumb_padding_top;
padding-top: $breadcrumb_padding_top;
position: fixed;
width: inherit;
z-index: 2;
margin-top: $header_height;
white-space: nowrap;
overflow-x: scroll;
#carat {
  height: 10px;
  margin: 0 5px;
}

}

//////////////////////////////// // Side Navigation ////////////////////////////////

.sidebar {

background-color: $sidebar_bg_color;
border: $gray_border;
overflow-y: auto;
overflow-x: hidden;
position: fixed;
top: $content_top_offset;
bottom: 0;
width: $sidebar_width;
word-wrap: normal;

}

.nav-groups {

list-style-type: none;
background: $white_color;
padding-left: 0;

}

.nav-group-name {

border-bottom: $gray_border;
font-size: 1.1em;
font-weight: 100;
padding: 15px 0 15px 20px;
> a {
  color: #333;
}

}

.nav-group-tasks {

margin-top: 5px;

}

.nav-group-task {

font-size: 0.9em;
list-style-type: none;
white-space: nowrap;
a {
  color: #888;
}

}

//////////////////////////////// // Main Content ////////////////////////////////

.main-content {

background-color: $white_color;
border: $gray_border;
margin-left: $content_body_left_offset;
position: absolute;
overflow: hidden;
padding-bottom: 20px;
top: $content_top_offset;
width: $content_wrapper_width - $content_body_left_offset;
p, a, code, em, ul, table, blockquote {
  margin-bottom: 1em;
}
p {
  line-height: 1.8em;
}
section {
  .section:first-child {
    margin-top: 0;
    padding-top: 0;
  }

  .task-group-section .task-group:first-of-type {
    padding-top: 10px;

    .section-name {
      padding-top: 15px;
    }
  }

  .heading:before {
    content: "";
    display: block;
    padding-top: $content_top_offset;
    margin: -$content_top_offset 0 0;
  }
}
.section-name {
  p {
     margin-bottom: inherit;
     line-height: inherit;
  }
  code {
    background-color: inherit;
    padding: inherit;
    color: inherit;
  }
}

}

.section {

padding: 0 25px;

}

.highlight {

background-color: $code_bg_color;
padding: 10px 12px;
border: $gray_border;
border-radius: 4px;
overflow-x: auto;

}

.declaration .highlight {

overflow-x: initial; // This allows the scrollbar to show up inside declarations
padding: 0 40px 40px 0;
margin-bottom: -25px;
background-color: transparent;
border: none;

}

.section-name {

margin: 0;
margin-left: 18px;

}

.task-group-section {

margin-top: 10px;
padding-left: 6px;
border-top: $gray_border;

}

.task-group {

padding-top: 0px;

}

.task-name-container {

a[name] {
  &:before {
    content: "";
    display: block;
    padding-top: $content_top_offset;
    margin: -$content_top_offset 0 0;
  }
}

}

.section-name-container {

position: relative;
display: inline-block;

.section-name-link {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin-bottom: 0;
}

.section-name {
  position: relative;
  pointer-events: none;
  z-index: 1;
  a {
    pointer-events: auto;
  }
}

}

.item {

padding-top: 8px;
width: 100%;
list-style-type: none;
a[name] {
  &:before {
    content: "";
    display: block;
    padding-top: $content_top_offset;
    margin: -$content_top_offset 0 0;
  }
}
code {
  background-color: transparent;
  padding: 0;
}
.token, .direct-link {
  display: inline-block;
  text-indent: -20px;
  padding-left: 3px;
  margin-left: 35px;
  font-size: 11.9px;
  transition: all 300ms;
}
.token-open {
  margin-left: 20px;
}
.discouraged {
  text-decoration: line-through;
}

}

.declaration-note {

font-size: .85em;
color: rgba(128,128,128,1);
font-style: italic;

}

.pointer-container {

border-bottom: $gray_border;
left: -23px;
padding-bottom: 13px;
position: relative;
width: 110%;

}

.pointer {

background: $declaration_bg_color;
border-left: $gray_border;
border-top: $gray_border;
height: 12px;
left: 21px;
top: -7px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
width: 12px;

}

.height-container {

display: none;
left: -25px;
padding: 0 25px;
position: relative;
width: 100%;
overflow: hidden;
.section {
  background: $declaration_bg_color;
  border-bottom: $gray_border;
  left: -25px;
  position: relative;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 5px;
}

}

.aside, .language {

padding: 6px 12px;
margin: 12px 0;
border-left: $aside_border;
overflow-y: hidden;
.aside-title {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-bottom: 0;
  margin: 0;
  color: $aside_color;
  -webkit-user-select: none;
}
p:last-child {
  margin-bottom: 0;
}

}

.language {

border-left: $declaration_language_border;
.aside-title {
  color: $declaration_title_language_color;
}

}

.aside-warning, .aside-deprecated, .aside-unavailable {

border-left: $aside_warning_border;
.aside-title {
  color: $aside_warning_color;
}

}

.graybox {

border-collapse: collapse;
width: 100%;
p {
  margin: 0;
  word-break: break-word;
  min-width: 50px;
}
td {
  border: $gray_border;
  padding: 5px 25px 5px 10px;
  vertical-align: middle;
}
tr td:first-of-type {
  text-align: right;
  padding: 7px;
  vertical-align: top;
  word-break: normal;
  width: 40px;
}

}

.slightly-smaller {

font-size: 0.9em;

}

footer {

position: relative;
top: 10px;
bottom: 0px;
margin-left: 25px;
p {
  margin: 0;
  color: #aaa;
  font-size: 0.8em;
}

}

//////////////////////////////// // Dash ////////////////////////////////

html.dash {

header, #breadcrumbs, .sidebar {
  display: none;
}
.main-content {
  width: $content_wrapper_width;
  margin-left: 0;
  border: none;
  width: 100%;
  top: 0;
  padding-bottom: 0;
}
.height-container {
  display: block;
}
.item .token {
  margin-left: 0;
}
.content-wrapper {
  width: auto;
}
#footer {
  position: static;
}

}

// =========================================================================== // // Search // // =========================================================================== form {

float: right;

input {
  font: Helvetica, freesans, Arial, sans-serif;
  margin-top: 6px;
  font-size: 13px;
  line-height: 20px;
  padding: 0px 10px;
  border: none;
  border-radius: 1em;
  .loading & {
    background: white url(../img/spinner.gif) center right 4px no-repeat;
  }
}

// Typeahead elements

.tt-menu {
  margin: 0;
  min-width: 300px;
  background: $white_color;
  color: #333;
  border: $gray_border;
  z-index: 4;
}

.tt-highlight {
  font-weight: bold;
}

.tt-suggestion {
  font: Helvetica, freesans, Arial, sans-serif;
  font-size: 14px;
  padding: 0 8px;
  span {
    display: table-cell;
    white-space: nowrap;
  }
  .doc-parent-name {
    width: 100%;
    text-align: right;
    font-weight: normal;
    font-size: 0.9em;
    padding-left: 16px;
  }
}

.tt-suggestion:hover,
.tt-suggestion.tt-cursor {
  cursor: pointer;
  background-color: #4183c4;
  color: #fff;
}

.tt-suggestion:hover .doc-parent-name,
.tt-suggestion.tt-cursor .doc-parent-name {
  color: #fff;
}

}