$sphinx_full_width: 1600px;
$sphinx_medium_width: 1101px;
$sphinx_full_width_content_width: 700px;

$sphinx_left_menu_wrapper_padding_right: 13.5%;
$sphinx_left_menu_width: 25%;
$sphinx_left_menu_scroll_wrapper_width: 120%;

$sphinx_content_wrap_width: 71%;
$sphinx_content_wrap_left_margin: 26.4%;

$sphinx_article_width: 75%;

$sphinx_right_menu_wrap_left_margin: 2%;
$sphinx_right_menu_left_margin: 81.5%;
$sphinx_right_menu_scroll_wrapper_width: 120%;

$sphinx_page_bar_left_margin: 25%;
$sphinx_page_bar_left_padding: 2%;

$sphinx_shortcuts_left_margin: 78%;

@mixin sphinx-full-size {
  @media screen and (min-width: $sphinx_full_width) { @content; }
}

@mixin sphinx-medium-size {
  @media screen and (min-width: $sphinx_medium_width) { @content; }
}

@mixin format-code($background, $pad: true) {
  border-top: solid 2px $background;
  background-color: $background;
  border-bottom: solid 2px $background;
  @if $pad {
    padding: 0px 3px;  // the containing `code` does proper spacing
    .pre {
      outline: 0px;
      padding: 0px;  // remove extra spacing on children
    }
  }
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

html {
  height: 100%;
  @include desktop {
    font-size: 16px;
  }
}

body {
  background: $white;
  height: 100%;
  margin: 0;
  &.no-scroll {
    height: 100%;
    overflow: hidden;
  }
}

p {
  margin-top: 0;
  margin-bottom: rem(18px);
  @include default_link_styles;
  a:link,
  a:visited,
  a:hover {
    color: $red_orange;
  }
}

.wy-breadcrumbs li a {
  color: $red_orange;
}

ul.pytorch-breadcrumbs {
  padding-left: 0;
  list-style-type: none;

  li {
    display: inline-block;
    font-size: rem(14px);
  }

  a {
    color: $red_orange;
    text-decoration: none;
  }
}

.table-of-contents-link-wrapper {
  display: block;
  margin-top: 0;
  padding: rem(20px) rem(30px);
  background-color: $light_grey;
  position: relative;
  color: $slate;
  font-size: rem(20px);

  &.is-open {
    .toggle-table-of-contents {
      transform: rotate(180deg);
    }
  }

  @include full-nav-menu-desktop {
    display: none;
  }
}

.toggle-table-of-contents {
  background-image: url("../images/chevron-down-grey.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  height: 100%;
  position: absolute;
  right: 21px;
  width: 30px;
  top: 0;
}

.tutorials-header {
  .header-logo {
    background-image: url("../images/logo.svg");
  }

  .main-menu ul li a {
    color: $not_quite_black;
  }

  .main-menu-open-button {
    background-image: url("../images/icon-menu-dots-dark.svg");
  }
}

.rst-content footer {

  .helpful-hr.hr-top {
    margin-bottom: rem(-1px);
  }

  .helpful-hr.hr-bottom {
    margin-top: rem(-1px);
  }

  .helpful-container {
    display: inline-flex;
    font-size: rem(18px);

    .helpful-question, .was-helpful-thank-you {
      padding: rem(10px) rem(20px) rem(10px) rem(20px);
    }

    .was-helpful-thank-you {
      display: none;
    }

    .helpful-question.yes-link, .helpful-question.no-link {
      color: $orange;
      cursor: pointer;

      &:hover {
        background-color: $orange;
        color: $white;
      }
    }
  }

  div[role="contentinfo"] {
    padding-top: rem(40px);
    p {
      margin-bottom: 0;
    }
  }
}

h1 {
  font-size: rem(32px);
  letter-spacing: 1.78px;
  line-height: rem(40px);
  text-transform: uppercase;
  margin: rem(22px) 0;
}

span.pre {
  color: $content_text_color;
  background-color: $light_grey;
  padding: 2px 6px;
}

pre {
  background-color: $light_grey;
  padding: rem(22px);
}

.highlight .c1 {
  color: $quick_start_grey;
}

.headerlink {
  display: none !important;
}

a:link,
a:hover,
a:visited {
  &.has-code {
    color: $code_link_color;
    span {
      color: $code_link_color;
    }
  }
}

article.pytorch-article {
  ul,
  ol {
    padding-left: rem(30px);
    margin: 0;

    li {
      margin: 0;
      line-height: rem(28px);
    }
    p {
      line-height: rem(28px);
      margin-bottom: 0;
    }

    ul,
    ol {
      margin: 0;
    }
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: normal;
    a {
      color: $not_quite_black;
    }
  }
  p.caption {
    margin-top: rem(20px);
  }
}

article.pytorch-article .section:first-of-type h1:first-of-type {
  margin-top: 0;
}

article.pytorch-article .sphx-glr-thumbcontainer {
  margin: 0;
  border: 1px solid #d6d7d8 ;
  border-radius: 0;
  width: 45%;
  text-align: center;
  margin-bottom: 5%;

  @media screen and (max-width: $sphinx_medium_width - 1px) {
    &:nth-child(odd) {
      margin-left: 0;
      margin-right: 2.5%;
    }

    &:nth-child(even) {
      margin-right: 0;
      margin-left: 2.5%;
    }

    .figure {
      width: 40%;
    }
  }

  @include sphinx-medium-size {
    margin-right: 3%;
    margin-bottom: 3%;
    width: 30%;
  }

  .caption-text {
    a {
      font-size: rem(16px);
      color: $not_quite_black;
      letter-spacing: 0;
      line-height: rem(24px);
      text-decoration: none;
    }
  }

  &:hover {
    .figure:before {
      bottom: 100%;
    }

    box-shadow: none;
    border-bottom-color: $white;
  }

  .figure {
    width: 80%;
  }

  .figure:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 35%;
    left: 0;
    right: 0;
    background: #8A94B3;
    opacity: 0.10;
  }

  .figure a.reference.internal {
    text-align: left;
  }

  @include animated_border_hover_state;
  @include desktop {
    &:after {
      background-color: $red_orange;
    }
  }
}

article.pytorch-article {
  .section {
    :not(dt) > code {
      color: $not_quite_black;
      @include format-code($light_grey);
    }
  }

  .function {
    dt {
      position: relative;
      background: $light_grey;
      padding: rem(8px);
      border-left: 3px solid $red_orange;
      word-wrap: break-word;
      padding-right: 100px;

      em.property {
        font-family: inherit;
      }

      em, .sig-paren {
        @include code_font_family;
        font-size: 87.5%;
      }

      a {
        position: absolute;
        right: 30px;
        padding-right: 0;
        top: 50%;
        transform: perspective(1px) translateY(-50%);
      }
      &:hover {
        .viewcode-link {
          color: $red_orange;
        }
      }
    }
    .anchorjs-link {
      display: inline;
      position: absolute;
      right: 8px;
      font-size: rem(25px) !important;
      padding-left: 0;
    }

    dt > code {
      color: $not_quite_black;
      @include format-code($light_grey, false);
    }

    .viewcode-link {
      font-size: rem(14px);
      color: #979797;
      letter-spacing: 0;
      line-height: rem(24px);
      text-transform: uppercase;
    }
    dd {
      padding-left: rem(60px);
      p {
        color: $not_quite_black;
      }
    }
    table {
      tbody {
        tr {
          th.field-name {
            white-space: nowrap;
            color: $not_quite_black;
            width: 20%;
            @include desktop {
              width: 15%;
            }
          }
          td.field-body {
            padding: 0.625rem;
            width: 80%;
            @include desktop {
              width: 85%;
            }
            @include sphinx-full-size {
              padding-left: rem(20px);
            }
            color: $not_quite_black;
            p {
              padding-left: 0px;
              &:last-of-type {
                margin-bottom: 0;
              }
            }
            ol, ul {
              padding-left: rem(16px);
              padding-bottom: 0;
            }
          }
        }
      }
    }

    table.docutils.field-list {
      margin-bottom: rem(12px);
    }
  }
  .attribute {
    @extend .function;
    .has-code {
      float: none;
    }
  }

  .class {
    @extend .function;
    dt {
      border-left: none;
      border-top: 3px solid $red_orange;
      padding-left: 4em;
      em.property {
        position: absolute;
        left: 0.5rem;
      }
    }

    dd {
      .docutils {
        dt {
          padding-left: 0.5rem;
        }
      }
    }

    em.property {
      text-transform: uppercase;
      font-style: normal;
      color: $red_orange;
      font-size: rem(16px);
      letter-spacing: 0;
      padding-right: rem(12px);
    }

    dl dt em.property {
      position: static;
      left: 0;
      padding-right: 0;
    }

    .method,
    .staticmethod {
      dt {
        border-left: 3px solid $red_orange;
        border-top: none;
      }
      dt {
        padding-left: 0.5rem;
      }
    }
    .attribute {
      @extend .attribute;
      dt {
        border-top: none;
        em.property {
          position: relative;
          left: 0;
        }
      }
    }
  }

  table {
    table-layout: fixed;
  }
}

// Below defines css styles for admonitions, i.e., notes, warnings, etc.  Some
// of these, e.g., formatting for <code/>, is supposed to over write the ones
// defined above for entire sections, e.g, .function and .class.  So this is
// placed later in this file, for higher precedence when both rules have same
// specificities.
article.pytorch-article {
  .note,
  .warning,
  .tip,
  .hint,
  .important,
  .caution,
  .danger,
  .attention,
  .error {
    background: $light_grey;
    margin-top: rem(30px);
    margin-bottom: rem(18px);

    .admonition-title {
      color: $white;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: rem(18px);
      padding: 3px 0 3px rem(22px);
      position: relative;
      font-size: rem(14px);
      &:before {
        content: "\2022";
        position: absolute;
        left: 9px;
        color: $white;
        top: 2px;
      }
    }
    p:nth-child(n + 2) {
      padding: 0 rem(22px);
    }
    table {
      margin: 0 rem(32px);
      width: auto;
    }
    .pre,
    pre {
      background: $white;
      outline: 1px solid #e9e9e9;
    }

    :not(dt) > code {
      @include format-code($white);
      outline: 1px solid #e9e9e9;
    }

    pre {
      margin-bottom: 0;
    }

    .highlight {
      margin: 0 rem(32px) rem(18px) rem(32px);
    }

    ul,
    ol {
      padding-left: rem(52px);
      li {
        color: $not_quite_black;
      }
    }

    p {
      margin-top: rem(18px);
    }
  }

  .note .admonition-title {
    background: #54c7ec;
  }

  .warning .admonition-title {
    background: #e94f3b;
  }

  .tip .admonition-title {
    background: #6bcebb;
  }

  .hint .admonition-title {
    background: #a2cdde;
  }

  .important .admonition-title {
    background: #5890ff;
  }

  .caution .admonition-title {
    background: #f7923a;
  }

  .danger .admonition-title {
    background: #db2c49;
  }

  .attention .admonition-title {
    background: #f5a623;
  }

  .error .admonition-title {
    background: #cc2f90;
  }

  .sphx-glr-download-link-note.admonition.note,
  .reference.download.internal, .sphx-glr-signature {
    display: none;
  }

  .admonition > p:last-of-type {
    margin-bottom: 0;
    padding-bottom: rem(18px) !important;
  }
}

.pytorch-article {
  div.sphx-glr-download a {
    background-color: $light_grey;
    background-image: url("../images/arrow-down-orange.svg");
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 15px 15px;
    border-radius: 0;
    border: none;
    display: block;
    text-align: left;
    padding: rem(15px) rem(50px);
    position: relative;
    margin: rem(20px) auto;

    @include animated_border_hover_state;
    @include desktop {
      &:after {
        background-color: $red_orange;
      }
    }

    @include desktop {
      background-position: left 20px center;
    }

    &:hover {
      box-shadow: none;
      text-decoration: none;
      background-image: url("../images/arrow-down-orange.svg");
      background-color: $light_grey;
    }

    span.pre {
      background-color: transparent;
      font-size: rem(18px);
      padding: 0;
      color: $not_quite_black;
    }

    code, kbd, pre, samp, span.pre {
      font-family: FreightSans, Helvetica Neue, Helvetica, Arial, sans-serif;
    }
  }
}

.pytorch-article p.sphx-glr-script-out {
  margin-bottom: rem(18px);
}

.pytorch-article div.sphx-glr-script-out {
  margin-bottom: rem(40px);
  .highlight {
    margin-left: 0;
    margin-top: 0;
  }

  .highlight pre {
    background-color: #fdede9;
    padding: rem(25px);
    color: #837b79;
  }

  + p {
    margin-top: unset;
  }
}

article.pytorch-article {
  .wy-table-responsive {
    table {
      border: none;
      border-color: $white !important;
      table-layout: fixed;
      thead {
        tr {
          border-bottom: 2px solid $quick_start_grey;
        }
        th {
          line-height: rem(28px);
          padding-left: rem(15px);
          padding-right: rem(15px);
        }
      }
      tbody {
        .row-odd {
          background-color: $light_grey;
        }
        td {
          color: $quick_start_grey;
          white-space: normal;
          padding: rem(15px);
          font-size: rem(16px);
          line-height: rem(22px);
          .pre {
            background: $white;
            outline: 1px solid #e9e9e9;
            color: $red_orange;
            font-size: 87.5%;
          }
          code {
            font-size: 87.5%;
          }
        }
      }
    }
  }
}

a[rel~="prev"], a[rel~="next"] {
  padding: 0.375rem 0 0 0;
}

tens.next-page,
tens.previous-page {
  width: 8px;
  height: 10px;
  position: relative;
  top: -1px;
}

tens.previous-page {
  transform: scaleX(-1);
}

.rst-footer-buttons {
  margin-top: rem(30px);
  margin-bottom: rem(30px);
  .btn:focus,
  .btn.focus {
    box-shadow: none;
  }
}

article.pytorch-article {
  blockquote {
    margin-left: rem(60px);
    color: $quick_start_grey;
  }
}

article.pytorch-article .caption {
  color: $quick_start_grey;
  letter-spacing: 0.25px;
  line-height: rem(34px);
}

article.pytorch-article {
  .math {
    color: $not_quite_black;
    width: auto;
    text-align: center;
    tens {
      width: auto;
    }
  }
}

.pytorch-breadcrumbs-wrapper {
  width: 100%;

  @include sphinx-medium-size {
    float: left;
    margin-left: 3%;
    width: $sphinx_article_width;
  }

  @include sphinx-full-size {
    width: 850px;
    margin-left: rem(30px);
  }

  .pytorch-breadcrumbs-aside {
    float: right;
  }
}

.pytorch-article .container {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

a:link,
a:visited,
a:hover {
  color: $red_orange;
}

::-webkit-input-placeholder {
  color: $red_orange;
}

::-moz-placeholder {
  color: $red_orange;
}

:-ms-input-placeholder {
  color: $red_orange;
}

:-moz-placeholder {
  color: $red_orange;
}

.site-footer {
  @include desktop {
    a:hover {
      color: $red_orange;
    }
  }
}

.docs-tutorials-resources {
  a {
    color: $red_orange;
  }
}

.header-holder {
  position: relative;
  z-index: 201;
}

.header-holder .main-menu {
  ul li {
    &.active {
      &:after {
        color: $red_orange;
      }

      a {
        color: $red_orange;
      }
    }
  }

  ul li a {
    @include full-nav-menu-desktop {
      &:hover {
        color: $red_orange;
      }
    }
  }
}

.mobile-main-menu.open {
  ul li.active a {
    color: $red_orange;
  }
}

.version {
  padding-bottom: rem(16px);
}

.pytorch-call-to-action-links {
  padding-top: 0;
  display: flex;

  @include desktop {
    padding-top: rem(40px);
  }

  @include small-desktop {
    padding-top: 0;
  }

  @media (min-width: 1100px) and (max-width: 1239px) {
    padding-top: rem(40px);
   }

  #tutorial-type {
    display: none;
  }

  .call-to-action-tens, .call-to-action-notebook-tens {
    height: rem(22px);
    width: rem(22px);
    margin-right: 10px;
  }

  .call-to-action-notebook-tens {
    height: rem(16px);
  }

  a {
    padding-right: rem(20px);
    color: $black;
    cursor: pointer;
    &:hover {
      color: $orange;
    }

    .call-to-action-desktop-view {
      display: none;
      @include desktop {
        display: block;
      }
    }

    .call-to-action-mobile-view {
      display: block;
      @include desktop {
        display: none;
      }
    }

    #google-colab-link, #download-notebook-link,
    #github-view-link {
      padding-bottom: rem(10px);
      border-bottom: 1px solid $light_grey;
      padding-right: rem(40px);
      display: flex;
      align-items: center;
      &:hover {
        border-bottom-color: $orange;
        color: $orange;
      }
    }
  }
}
