article.lesson {
  $lesson-sidebar-width: 38rem;
  $lesson-fullscreen-width: 80rem;

  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: $lesson-sidebar-width;
  overflow-x: hidden; // be _strict_ about width: we assume later it's exactly what we set it to

  .description,
  ol.steps {
    @include content-3;
    font-weight: lighter;
  }

  h1 {
    display: none;
  }

  & > .description {
    display: none;
  }

  .sections {
    flex-grow: 1;
    background-color: $document-blue;
  }

  ul {
    list-style-type: none;
    margin-left: -4rem;
    li {
      margin-bottom: 1.5rem; // TODO lesson-ul-li-margin where is this used?
    }
  }

  img {
    position: relative;
    width: 34rem;
    padding: 0rem;
  }

  .icon-insert {
    padding: 0;
    background-color: transparent;
    padding: 0.5rem;
    width: 3rem;
  }

  span.partner-name-and-logo {
    // Logo embedded in a piece of text that has no word breaks. Use it for the start of a
    // brand name.
    white-space: nowrap;

    img {
      display: inline-block;
      max-width: 1em;
      max-height: 1em;
      width: auto;
      height: auto;
    }
  }

  section {
    position: relative; // for confetti placement
    display: flex;
    flex-direction: column;
    height: calc(100vh - 6rem);
    width: 100%;
    padding: 2rem;
    overflow-y: auto;
    overflow-x: hidden;

    a {
      color: white;
      text-decoration: underline;
    }

    &.not-current {
      display: none;
    }

    .backToLessons {
      @extend .info-1;
      font-size: 1.3rem;
      color: white;
      text-transform: uppercase;
      text-decoration: none;
      margin-bottom: 1rem;
      display: none;
      &:hover {
        opacity: 1;
        text-decoration: underline;
      }
    }

    h2 {
      color: white;
      line-height: 3rem;
      margin-bottom: 0;
    }

    // Top part of section, outlining goals
    & > .description {
      margin-top: 2rem;
      color: white;

      p {
        margin-bottom: 2rem;
      }
    }

    .copy-txt,
    .answer {
      position: relative;
      width: 34rem;
      margin: -1rem 0 2rem 0;
      padding: 0.5rem 1.5rem;
      background-color: $dark-accent--medium;
      word-break: break-all;
      border-radius: 0.3rem;
      cursor: text;
      @include content-3;
    }

    .copy-txt,
    .code-block {
      @include code-1;
    }

    .highlight {
      font-weight: normal;
      color: $brand-text--learn;
    }

    figure {
      margin: 1rem 0 2rem 0 !important;
      max-width: 100%;
      margin: 0 auto; // in case image is too small
      &.half-width img {
        width: 50%;
      }

      figcaption {
        @extend .info-1;
        font-size: 1.3rem;
        line-height: 2.5rem;
        text-align: center;
      }
    }

    .instruction-detail,
    .question {
      position: relative;
      font-weight: normal;
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
      color: $white;
      width: 34rem;
    }

    //Q&A in lessons
    .question {
      margin-left: -2rem;
      margin-bottom: 1rem;
    }

    .answer {
      font-weight: 200;
      margin: 0rem 0 2rem -2rem;
    }

    code {
      @include code-1;
      background-color: $dark-accent--medium;
      color: white;
      padding: 0.5rem;
      border-radius: 0.3rem;
    }

    kbd {
      @include code-1;
      color: $brand-text--learn;
    }

    h3.instructions {
      // Instructions title
      color: $white;
      margin-top: 2rem;
      margin-bottom: 2rem;
    }

    & > .instructions {
      color: white;

      ol.steps {
        position: relative;
        list-style-position: inside;
        margin: 0;
        padding: 0;

        & > li {
          margin-bottom: 1rem;
          list-style-type: none;
          padding-left: 2rem;

          // off setting those elements to make them larger
          figure img,
          figcaption,
          .instruction-detail,
          .image {
            left: -2rem;
          }

          .copy-txt {
            left: -2rem;
            margin-top: 1rem;
          }

          &::before {
            content: '\e946';
            color: $light-accent--Vstrong;
            font-size: 0.8rem;
            font-family: Workbench;
            position: absolute;
            margin-left: -2rem;
          }
          &.active::before {
            content: '\e946';
            color: $light-accent--Vstrong;
          }
          &.done::before {
            content: '\e94a'; // icon-check
            color: $brand-learn;
            font-size: 1.3rem;
          }
        }

        ul li {
          // Sub-list of instructions within a Step
          // For instance:
          // <p>Delete the following columns:</p>
          // <ul>
          //   <li><code>column 1</code></li>
          //   <li><code>column 2</code></li>
          // </ul>
          margin-bottom: 0; // TODO lesson-ul-li-margin
        }
      }
    }

    .confetti-wrapper {
      pointer-events: none;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;

      .confetti {
        position: absolute;
        left: 50%;
        top: 50%;
      }
    }

    // Completion message at end ot lesson
    .completed {
      margin-top: 0;
      margin-bottom: 1rem;
      .summary {
        @extend h4;
        line-height: 2.5rem;
      }
    }

    // Suggestions to continue learning
    .next {
      margin-top: 3rem;

      h2 {
        margin-top: 2rem;
      }

      h4 {
        margin-bottom: 2rem;
        text-transform: capitalize;
      }

      ol {
        margin-left: -4rem;

        li {
          list-style-type: none;

          &::before {
            display: none;
          }

          a {
            @extend .highlight;
            @extend .description;
            text-decoration: underline;
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }
  }

  footer {
    background-color: $document-blue;
    border-top: 1px solid $dark-accent--medium;
    height: 6rem;
    flex: 0 0 auto;

    .buttons-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.2rem 3rem;
      flex: 0 0 auto;

      .action-button {
        width: 9rem;

        &.lesson-highlight {
          @include button-pink-fill;
        }

        &:disabled {
          opacity: 0;
        }
      }

      .current-and-total {
        @extend .content-1;
        color: $white;
        white-space: nowrap;
      }
    }
  }

  &.fullscreen {
    position: absolute;
    left: 0;
    width: 100%;
    top: 5.5rem;
    bottom: 0; // and no height
    z-index: 2;
    width: 100%;

    figure {
      img.full-width {
        // 3 sizes of content to play with
        width: 100%;
      }
      img.half-width {
        width: 50%;
      }
      img.three-quarter-width {
        width: 75%;
      }
      .no-border {
        // Sometimes, border are not wanted
        background-color: transparent;
        padding-left: 0rem;
      }
    }

    iframe {
      border: 0.5rem solid $brand-text--learn;
      margin-top: 1rem;
    }

    .code-block {
      width: 100%;
    }

    .content {
      // Put vertical scrollbar on the _full-width_ <div class="content">, not the <section>
      // That way it appears at the total right side of the page, not the middle
      overflow-y: auto;
    }

    .instruction-detail {
      width: 100%;
    }

    section.current {
      width: 100%;
      max-width: $lesson-fullscreen-width;
      margin: 0 auto;
      height: calc(100vh - 12rem); // accounts for both nav and footer
      // No vertical scrollbar in the <section>: we use <div class="content">'s scrollbar instead.
      overflow: visible;

      a.backToLessons {
        display: none;
      }
    }

    footer {
      display: flex;
      justify-content: center;

      .buttons-container {
        width: $lesson-fullscreen-width;
        justify-content: flex-start;
        padding-left: 2rem;

        button,
        div {
          margin-right: 5rem;
        }
      }
    }

    // start button in fullsceen lesson page, for lesson start
    a.start {
      margin-top: 3rem;
      @extend %action-button;
      @include button-pink-fill;
    }

    section.lesson-footer.current {
      position: absolute;
      width: $lesson-fullscreen-width;
    }
  }

  &.fullscreen + .workflow-container {
    // make sure .workflow-columns stays in the same place it would if the
    // lesson were visible. This assumes the sidebar is always exactly
    // $lesson-sidebar-width, regardless of its content.
    & > :not(nav) {
      margin-left: $lesson-sidebar-width;
    }

    // hide both navbar menu  and undo redo when fullscreen
    nav {
      .navbar-elements {
        width: $lesson-fullscreen-width;
        padding: 0 2rem;
        margin: 0 auto;

        .dropdown,
        .group--undo-redo {
          display: none;
        }
      }
    }
  }
}
