.onboarding {
  > .wrapper {
    background-color: $purple;
    color: $white;
    margin: auto;
    max-width: 1440px;
    padding: $base-spacing 0 $section-spacing;
    position: relative;
  }

  // @TODO: Seems like we want border radius on media moving forward
  // so maybe we add the border-radius to all media-* classes?
  // @TODO: Also, the aspect ratio for the video used on onboarding
  // varies from the typical videos on the website so we need to modify
  // the % padding value. Might be useful to turn into a mixin in the future.
  .media-video {
    border-radius: 4px;
    padding-bottom: 60.4%;
  }

  // @TODO: convert this to an extension of the card pattern.
  .photo {
    border-radius: 4px;
    color: #444;
  }

  .container.-compact > .wrapper {
    margin: 0 $base-spacing / 2;
    width: initial;

    @include media($medium) {
      margin: 0 $base-spacing;
    }

    @include media($large) {
      margin: 0 12.5%;
    }
  }
}

// @TODO: maybe this close button should be a pattern
// since it is used in the modal and this onboarding component?
.onboarding__close-button {
  background-color: transparent;
  border: 0 none;
  color: $med-gray;
  display: block;
  font-size: 42px;
  line-height: 1;
  padding: ($base-spacing/2);
  position: absolute;
  right: 0;
  top: 0;

  @include media($tablet) {
    right: ($base-spacing/2);
  }

  &:hover {
    color: #ccc;
    cursor: pointer;
  }
}

.slideshow__slide {
  position: relative;
  display: none;

  .heading {
    color: $white;
  }

  p + .heading {
    margin-top: $section-spacing;
  }

  &.-active {
    display: block;
  }

  @include media($mobile) {
    // Hides last two cards on mobile
    .gallery.-quartet > li:nth-last-of-type(-n+2) {
      display: none;
    }
  }
}

.slideshow__controller {
  display: table;
  margin: $base-spacing auto 0;
  min-height: 41px;
  padding: 0 ($base-spacing / 2);
  position: relative;

  // @TODO: use classnames to help decouple from DOM hierarchy.
  > ul {
    overflow: hidden;

    > .slideshow__controller-indicator {
      float: left;
      padding: 6px 5px;
      color: $med-gray;

      &.-active {
        color: $white;
      }
    }
  }


  // @TODO: switch this to be a new modifier on the button class.
  > button {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
    cursor: pointer;
    font-size: $font-regular;
    padding: 8px 20px;
    position: absolute;
    top: 0;

    &:focus {
      outline: none;
    }
  }

  // @TODO: use attribute selector to designate disabled styles
  [disabled] {
    cursor: not-allowed;
    opacity: 0.3;
  }

  .button--prev {
    right: 100%;
  }

  .button--next {
    left: 100%
  }
}

/**
 * @TODO: move into Forge pattern library if approved.
 * Add to the _regions/_container pattern.
 */
.container {
  > .wrapper {

    .container__block  {
      &.-primary {
        @include media($tablet) {
          @include span(6 of 12)
        }

        @include media($desktop) {
          @include span(8 of 12)
        }
      }

      &.-secondary {
        @include media($tablet) {
          @include span(6 of 12)
        }

        @include media($desktop) {
          @include span(4 of 12)
        }
      }

      &.-narrow {
        &.-centered {
          float: none;
          margin: 0 auto;
        }
      }
    }

  }
}
