/*---------------------------------------------------
--- Anecdote: Wysicontent
--- content blocks of formatted text and modules
--------------------------------------------------- */

.anecdote-wysicontent-ndj4ab {
  > *:first-child {
    margin-top: 0;
  }
  > *:last-child {
    margin-bottom: 0;
  }
  > p, > ul, > ol, > blockquote, > pre {
    @include formatted-text( 1, 1, 1 );
  }
  > h1, > h2, > h3, > h4 {
    font-weight: 600;
  }
  > h1 {
    @include formatted-text( 2 );
  }
  > h2 {
    @include formatted-text( 1.55, 3 );
  }
  > h3 {
    @include formatted-text( 1.3, 3 );
  }
  > h4 {
    @include formatted-text( 1.15, 3 );
    font-style: italic;
  }
  > code, > pre {
    font-family: monospace;
  }
  > blockquote, > q {
    padding: 0 1.8em;
    quotes: '\201C' '\201D';
    font-style: italic;
    color: #777;
    &:before {
      content: '\201C'
    }
    &:after {
      content: '\201D'
    }
  }
  > ul, > ol {
    padding-left: 0;
    > li {
      @include remify( margin-left, 1.5 );
      @include formatted-text( 1, 0.75, 0.75 );
    }
  }
}

/*---------------------------------------------------
--- Anecdote: Media embeds
--- generic styles applied to media such as images, videos, etc
--------------------------------------------------- */
.anecdote-intrinsic-embed-n42ha1 {
  max-width: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: block; // when it is a link
  > .inner {
    height: 0;
    padding-bottom: 50%;
    position: relative;
    > * {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}

/*---------------------------------------------------
--- Anecdote: Modules
--- generic styles for images, pullquotes, asides, etc
--------------------------------------------------- */
.anecdote-module-3ba83n {
  @include remify( margin-top margin-bottom, 1 );
  @include margin-horizontal( auto );

  // sizes
  @include remify( max-width, 30 );
  &.v-size-small {
    @include remify( max-width, 12 );
  }
  &.v-size-medium {
    @include remify( max-width, 20 );
  }
  &.v-size-big {
    @include remify( max-width, 40 );
  }
  &.v-size-full-width {
    max-width: 100%;
  }

  // positioning
  &.v-float-right, &.v-float-left {
    @include margin-horizontal( auto );
    width: 100%;
  }

  @mixin float-module-3ba83n {
    &.v-float-right, &.v-float-left {
      @include remify( margin, 0.35, 2, 1 );
    }
    &.v-float-right {
      float: right;
      margin-right: 0;
    }
    &.v-float-left {
      float: left;
      margin-left: 0;
    }
  }
  &.v-float-from-always {
    @include float-module-3ba83n;
  }
  @each $breakpoint-name, $breakpoint-px in $respond-devices {
    &.v-float-from-#{$breakpoint-name} {
      @include respond(min, $breakpoint-name) {
        @include float-module-3ba83n;
      }
    }
  }

}


/*---------------------------------------------------
--- Anecdote: Caption
--------------------------------------------------- */
.anecdote-caption-ajkd3b {
  font-size: 0.8em;
  color: #555;
}

/*---------------------------------------------------
--- Anecdote: Graphic
--------------------------------------------------- */
.anecdote-graphic-dn32ja {
  .anecdote-caption-ajkd3b {
    @include remify( padding-top, 0.5 );
  }
}

/*---------------------------------------------------
--- Anecdote: Gallery
--------------------------------------------------- */
.anecdote-gallery-dn2bak {
  .anecdote-caption-ajkd3b {
    @include remify( padding-top, 0.5 );
  }
  .anecdote-graphic-dn32ja {
    margin-bottom: 0;
    &:first-child {
      margin-top: 0;
    }
  }
  .flexbox &.anecdote-flex-module-a4j2aj .flex-scope > .anecdote-module-3ba83n {
    @include remify( margin-left, 1 );
  }
}


.anecdote-flex-module-a4j2aj {
  .anecdote-flex-offset-a4j2aj {
    display: none;
  }

  @mixin flow-modules-an32ka {
    .flexbox & {
      .anecdote-flex-offset-a4j2aj {
        display: block;
      }
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      > .anecdote-module-3ba83n {
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        max-width: 100%;
        margin-top: 0;
        margin-bottom: 0;
      }
    }
    // TODO: support for nested flex modules with custom gutter spacing!
    > .anecdote-module-3ba83n {
      .flexbox & {
        @include remify( margin-left, 2.5 );
        &:first-child {
          margin-left: 0;
        }
      }
      @include scope-variation( '.v-gutter-spacing-small' ) {
        .flexbox & {
          @include remify( margin-left, 1 );
          &:first-child {
            margin-left: 0;
          }
        }
      }
      @include scope-variation( '.v-gutter-spacing-large' ) {
        .flexbox & {
          @include remify( margin-left, 4 );
          &:first-child {
            margin-left: 0;
          }
        }
      }
    }
  }
  &.v-flow-from-always {
    @include flow-modules-an32ka;
  }
  @each $breakpoint-name, $breakpoint-px in $respond-devices {
    &.v-flow-from-#{$breakpoint-name} {
      @include respond(min, $breakpoint-name) {
        @include flow-modules-an32ka;
      }
    }
  }

}

/*---------------------------------------------------
--- Anecdote: Pull Quote
--------------------------------------------------- */
.anecdote-pull-quote-sba2ha {
  @include formatted-text( 1.3, false, false );
  color: #333;
  border: 2px solid $color-strokes;
  border-left: none;
  border-right: none;
  font-style: italic;
  em {
    font-style: normal;
  }
  @include remify( margin-top margin-bottom, 1.7 );
  @include remify( padding-top padding-bottom, 1 );
  &.v-float-right, &.v-float-left {
    @include respond(max, large-handheld) {
      &.v-size-small {
        max-width: 100%;
      }
    }
    @include respond(max, laptop) {
      &.v-size-medium {
        max-width: 100%;
      }
    }
  }
}



/*---------------------------------------------------
--- Anecdote: Spacing & Horizontal Lines
--------------------------------------------------- */

.anecdote-spacing-an4a2q {
  height: 1px;
  width: 100%;
  display: block;
  @include remify( margin-top margin-bottom, 1.2 );
  &.v-tiny {
    @include remify( margin-top margin-bottom, 0.15 );
  }
  &.v-small {
    @include remify( margin-top margin-bottom, 0.6 );
  }
  &.v-big {
    @include remify( margin-top margin-bottom, 2.5 );
  }
  &.v-mega {
    @include remify( margin-top margin-bottom, 4 );
  }
}

.anecdote-horizontal-line-asj31a {
  width: 100%;
  display: block;
  margin-top: 0;
  margin-bottom: 0;

  height: 1px;
  background-color: $color-strokes;
  &.v-light {
    background-color: lighten($color-strokes, 4%);
  }
  &.v-notable {
    height: 2px;
  }
  &.v-heavy {
    height: 5px;
  }
  hr {
    display: none;
  }
}

/*---------------------------------------------------
--- Anecdote: Font Styles & Sizes
--------------------------------------------------- */

.anecdote-primary-font-a3a8fb {

}
.anecdote-secondary-font-a3a8fb {

}

.anecdote-tiny-text-size-an43ja {
  @include remify( font-size, 0.7 );
}
.anecdote-small-text-size-an43ja {
  @include remify( font-size, 0.85 );
}
.anecdote-normal-text-size-an43ja {
  @include remify( font-size, 1 );
}
.anecdote-large-text-size-an43ja {
  @include remify( font-size, 1.15 );
}