$navy: #30373b;
$navy--light: #7a8c9b;
$blue--light: #368aa9;
$blue--pale: #d3dbe2;
$grey--dark: #30373b;
$grey--light: #949595;
$grey--pale: #F9FAFA;
$grey--on-dark: #a9a9a9;

$docs--border: #798C9C;
$docs--code: #5C5C5C;
$docs--notes: #444444;

body {
  background: white;
  font-size: 15px;
}

body,
.marketing-markdown {
  color: #4E5665;
}

.marketing-markdown {
  max-width: 900px;
}

h1, .heading--1 {
  font-weight: 700;
  margin-bottom: 33px;
  font-size: 2em;
}

.marketing-markdown h2,
h2 {
  margin-top: 40px;
  margin-bottom: 33px;
  font-weight: 400;
}

.body-link,
main p > a,
main .marketing-markdown > a,
.marketing-markdown a:not(.marketing-button):not(.marketing-nav__button) {
  color: $blue--light;
  border-bottom: 0;
}

%blockquote {
  margin-left: 0;
  margin-right: 0;
  background: $grey--pale;
  padding: 25px;
  font-size: 1em;
  line-height: 1.7;
  font-weight: normal;

  p:last-child {
    margin-bottom: 0;
  }

  &:before,
  &:after {
    display: none;
  }
}

blockquote,
.marketing-markdown blockquote,
pre,
pre.code,
pre.prettyprint {
  @extend %blockquote;
}

table {
  pre,
  pre.code,
  pre.prettyprint {
    @extend %blockquote;
    margin: 0;
    padding: 0;
  }
}

code,
kbd,
samp,
pre,
pre.code,
pre.prettyprint,
.pln {
  font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace;
  font-size: 13px;
  color: $docs--code;
}

blockquote,
.marketing-markdown blockquote {
  border-left: 3px solid $docs--border;
  color: $docs--notes;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.marketing-markdown h3 code {
  display: block;
  border-bottom: 1px solid $docs--border;
}

.page-header {
  padding: 0;
  text-align: left;
}

.docs-header .npm-logo {
  height: 14px;
}

.docs-sidebar {
  background: $navy;
  font-size: 18px;
}

.site-title {
  &:hover {
    text-decoration: none;
  }
}

.docs-title {
  font-weight: $font-weight-light;

  @include shopify-breakpoint($desktop-up) {
    margin-bottom: 40px;
  }

  a {
    color: $color-white;
  }
}

.docs-nav {
  li {
    margin-bottom: 20px;
  }
}

.docs-nav__link,
.docs-sub-nav__link {
  color: $grey--on-dark;
  @include font-brandon-medium();

  &.active {
    color: white;
  }
}

.docs-sub-nav {
  border-left: 3px solid $grey--on-dark;
  padding-left: 10px;
  font-size: 13px;
  margin-top: 10px;
  margin-left: 5px;
  display: none;

  li {
    margin-bottom: 13px;
  }

  .active ~ & {
    display: block;
  }
}


.docs-shopify-logo {
  a {
    color: $grey--on-dark;
  }
}

.docs-header {
  border-bottom: 1px solid $blue--pale;
  padding-top: 15px;
  margin-bottom: 70px;
  font-size: 13px;

  a {
    color: #A0A0A0;
  }

  img {
    height: 18px;
    padding-right: 5px;
    opacity: 0.8;

  }

  li {
    display: inline-block;
    padding-right: 30px;
  }
}

#options-form {
  margin-bottom: 30px;
}

.marketing-markdown li ul {
  margin-top: 10px;
}


table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #ddd;
  background-color: transparent;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

  * {
    border: none;
    background: none;
  }

  th {
    border-bottom: 1px solid #ddd;
    background-color: #f9f9f9;
  }

  th,
  td {
    padding: 8px 15px;
  }

}

@include shopify-breakpoint($tablet-down) {
  .compat-table {
    display: block;
    font-size: 12px;

    thead, tbody, th, td, tr {
      display: block;
      font-size: 12px;
    }

    thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }

    tr { border: 1px solid #ccc; }

    td {
      border: none;
      border-bottom: 1px solid #eee;
      position: relative;
      padding-left: 50%;
    }

    td:before {
      position: absolute;
      top: 6px;
      left: 6px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
    }


    td:nth-of-type(1):before { content: "Internet Explorer"; }
    td:nth-of-type(2):before { content: "Chrome, Edge, Firefox"; }
    td:nth-of-type(3):before { content: "Safari"; }
    td:nth-of-type(4):before { content: "Opera"; }
    td:nth-of-type(5):before { content: "iOS"; }
    td:nth-of-type(6):before { content: "Android"; }
  }
}


.copy-button {
  padding: 3px 12px 5px;
  font-size: 1em;
  width: 100%;
  position: relative;
  top: -13px;
  background: #ccc;
  border-radius: 0 0 3px 3px;
}

.u-alignRight {
  text-align: right;
}

.config-table {
  width: 100%;

  th, td {
    vertical-align: top;
    text-align: left;
  }
  tr { border: 1px solid #ccc; }

  td {
    border: none;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    font-family: monospace;
  }

  td:nth-child(3) {
    font-family: 'Helvetica', 'Arial', 'sans-serif';
  }

}