Visual Guides

// Variables - TODO: Refactor stylebase
$visual-guide-breakpoint-large: 1050px;
$visual-guide-breakpoint-small: 750px;

/* A simple, center dividing column guide / line. See /recruiting-solutions/small-business-subscription-plans-and-pricing
 * The guide can extend out of its relatively positioned parent container on the bottom and top
 * This guide does not include steps. It is only a center line.
 * You must have a parent container (relatively positioned) for this to work properly.
 */
@mixin visual-guide-divider($extend-top: 0px, $extend-bottom: 0px) {

  @if $extend-top != 0px {
    bottom: -($extend-bottom);
    top: -($extend-top);
  } @else {
    bottom: $extend-bottom;
    top: $extend-top;
  }

  left: 0;
  position: absolute;
  right: 0;

  &:before, &:after {
    content: '';
    background-color: white;
    border: $base-border;
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
    height: $visual-divider-endpoint-size;
    margin: 0 auto;
    position: relative;
    width: $visual-divider-endpoint-size;
  }

  &:after {
    background-color: $grey-lighter;
  }

  .visual-guide__divider {
    background-color: $base-border-primary-color;
    height: 100%;
    margin: 0 auto;
    width: 1px;
  }
}

/* For <li> elements only within a <ol>
 * Parameter takes in a CSS counter that must be set / reset elsewhere
 * Each row (your <li> content) consists of a block of text, and an image, with a center gutter.
 * Modifiers include left properties to right justify content blocks (not text) along the center gutter.
 * TODO: Concerning guides with no steps
 */
@mixin visual-guide-row ($counter) {
  display: block;
  position: relative;

  &:last-of-type {
    margin-bottom: 0;
  }

  &:focus {
    outline: 0;
  }

  .visual-guide__image {
    display: none;

    @media only screen and (min-width: $visual-guide-breakpoint-small) {
      @include align-self(center);
      @include justify-content(center);
    }
  }

  .visual-guide__image--mobile {
    margin-bottom: $base-spacing;
    text-align: center;
    display: block;

    img {
      display: inline;
    }

    @media only screen and (min-width: $visual-guide-breakpoint-small) {
      display: none;

      img {
        display: block;
      }
    }
  }

  .visual-guide__image, .visual-guide__image--mobile {
    img {
      height: 100%;
    }
  }

  .visual-guide__content {
    display: block;
  }

  .visual-guide__item-description {
    h3 {
      font-size: 1.875rem;
      font-weight: $font-weight-light;
      margin-bottom: $base-spacing;
    }

    p {
      color: $text-color-grey;
    }

    @media only screen and (min-width: $visual-guide-breakpoint-small) {
      @include align-self(center);

      h3 {
        margin-bottom: $type-margin;
      }
    }
  }


  .visual-guide__step {
    display: none;
    background-color: white;
    border: $visual-guide-step-border;
    border-radius: 50%;
    box-sizing: border-box;
    font-size: $font-size-med;
    height: $visual-guide-step-size;
    margin: auto;
    width: $visual-guide-step-size;
    color: $text-color-dark;

    &:after {
      content: counter(overview-count);
    }

    @media only screen and (min-width: $visual-guide-breakpoint-small) {
      @include align-items(center);
      bottom: 0;
      @include display(flex);
      @include justify-content(center);
      left: 0;
      @include order(2);
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  @media only screen and (min-width: $visual-guide-breakpoint-small) {
    @include display(flex);

    .visual-guide__content, .visual-guide__image {
      @include display(flex);
      width: 50%;
    }

    &:nth-child(odd) {
      .visual-guide__content {
        @include justify-content(flex-end);
        margin-right: $base-spacing-xlarge;
        @include order(1);
      }
      .visual-guide__image {
        margin-left: $base-spacing-xlarge;
        @include order(3);
      }
    }

    &:nth-child(even) {
      .visual-guide__content {
        margin-left: $base-spacing-xlarge;
        @include order(3);
      }
      .visual-guide__image {
        margin-right: $base-spacing-xlarge;
        @include order(1);
      }
    }
  }
}