_patterns_tutorials.scss

@mixin maas-p-tutorials {
  .p-tutorial-section {
    display: none;

    &:target {
      display: block;
    }
  }

  .p-tutorials-meter {
    background-image: url('#{$assets-path}77d5aee3-maas-difficulty-meter.svg');
    background-position-x: -75px;
    background-position-y: center;
    background-repeat: no-repeat;
    display: inline-block;
    height: $sp-large;
    margin-left: $sp-xx-small;
    text-indent: -9999px;
    width: 74px;
  }

  .p-tutorials-meter--1 {
    background-position-x: -60px;
  }

  .p-tutorials-meter--2 {
    background-position-x: -45px;
  }

  .p-tutorials-meter--3 {
    background-position-x: -30px;
  }

  .p-tutorials-meter--4 {
    background-position-x: -15px;
  }

  .p-tutorials-meter--5 {
    background-position-x: 0;
  }

  .p-tutorial-section__footer {
    margin-bottom: $sp-medium;
  }

  .p-tutorial__bug-link {
    position: relative;
    top: -1.38rem;

    @media only screen and (min-width: $breakpoint-small) {
      top: 0;
    }
  }

  .p-tutorial__duration {
    margin-bottom: $sp-small;

    @media only screen and (min-width: $breakpoint-small) {
      display: inline-block;
      margin-bottom: 0;
      margin-right: $sp-medium;
    }
  }

  .p-tutorial__pagination {
    @media only screen and (min-width: $breakpoint-small) {
      display: inline-block;
    }
  }

  %p-tutorial-pagination-item {
    display: inline-block;
    margin-right: $sp-small;
    max-width: $sp-xxxx-large;

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

    @media only screen and (max-width: $breakpoint-small) {
      width: auto;
    }
  }

  .p-tutorial__pagination-item--prev {
    @extend %p-tutorial-pagination-item;

    .p-icon--chevron-down {
      transform: rotate(90deg);
    }
  }

  .p-tutorial__pagination-item--next {
    @extend %p-tutorial-pagination-item;

    .p-icon--chevron-down {
      transform: rotate(-90deg);
    }
  }

  .p-tutorial__feedback-icon {
    cursor: pointer;
  }

  .p-tutorial__feedback-options {
    .p-inline-list__item {
      .has-color {
        display: none;
      }

      &:hover {
        .p-tutorial__feedback-icon {
          display: none;
        }

        .has-color {
          display: inline-block;
        }
      }
    }
  }
}