/* ==========================================================================
   Tutorial
   ========================================================================== */

.tutorial {

  @import "../root/elements";

  .sidebar-offset {
    padding-top: 0px;
  }

  .container {
    width: 100%;
    max-width: 750px;

    padding: calc(1.5rem * #{$lineHeight}) calc(1rem * #{$lineHeight});
  }

  .container .card {
    max-width: 100%;
    padding: calc(1rem * #{$lineHeight}) calc(1rem * #{$lineHeight});

    @media (min-width: 960px) {
      max-width: calc(34rem + 10rem);
      padding: calc(1rem * #{$lineHeight}) calc(2rem * #{$lineHeight});
    }

    > * {
      margin-bottom: calc(1rem * #{$lineHeight});

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

  .container a:not(.btn) {
    transition: color .333s, border-bottom-width .333s;
    color: rgba($primary, .8);
    border-bottom-width: 1px;
  }

  .container a:not(.btn):hover {
    color: $accent;
  }

  /* Title
     ======================================================================== */

  .container .tutorial-title {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    @media (min-width: $screen-sm-min) {
      margin-bottom: 20px;
    }
  }

  /* Time
     ======================================================================== */

  .container .tutorial-time-remaining {
    color: rgba($primary, .8);
    font-family: $font-primary;
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: 20px;

    @media (min-width: $screen-sm-min) {
      float: right;
    }

    .icon {
      margin-right: calc(.5rem * #{$lineHeight});
      position: relative;
      top: 8px;
    }
  }

  /* Page Nav
     ======================================================================== */

  .tutorial-page-nav {
    text-align: center;
    margin-top: 36px;

    .btn {
      transition: background .333s;
      margin: 0 6px 12px;
      font-size: 1rem;

      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}