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

.anecdote-wysicontent-ndj4ab {
  // default line-height
  > * {
    line-height: 1.65;
  }

  // default text styles
  > p, > ul, > ol, > blockquote, > pre, > .anecdote-title-an4a2q.v-size-p {
    font-weight: 400;
    @include formatted-text( 1, 1, 1, false );
  }

  // titles
  > h1, > h2, > h3, > h4, > h5, > h6, > .anecdote-title-an4a2q.v-size-h1, > .anecdote-title-an4a2q.v-size-h2, > .anecdote-title-an4a2q.v-size-h3, > .anecdote-title-an4a2q.v-size-h4, > .anecdote-title-an4a2q.v-size-h5, > .anecdote-title-an4a2q.v-size-h6 {
    font-weight: 600;
    line-height: 1.425;
  }
  > h1, > .anecdote-title-an4a2q.v-size-h1 {
    @include formatted-text( 2, 3, 1, false );
    font-style: normal;
    line-height: 1.325;
  }
  > h2, > .anecdote-title-an4a2q.v-size-h2 {
    @include formatted-text( 1.55, 3, 1, false );
    font-style: normal;
  }
  > h3, > .anecdote-title-an4a2q.v-size-h3 {
    @include formatted-text( 1.3, 3, 1, false );
    font-style: normal;
  }
  > h4, > .anecdote-title-an4a2q.v-size-h4 {
    @include formatted-text( 1.15, 3, 1, false );
    font-style: italic;
  }
  > h5, > .anecdote-title-an4a2q.v-size-h5 {
    @include formatted-text( 1.1, 3, 1, false );
    font-style: italic;
  }
  > h6, > .anecdote-title-an4a2q.v-size-h6 {
    @include formatted-text( 1.05, 3, 1, false );
    font-style: italic;
  }

  // code
  > code, > pre {
    font-family: monospace;
  }

  // quotations
  > blockquote, > q {
    padding: 0 1.8em;
    quotes: '\201C' '\201D';
    font-style: italic;
    color: #777;
    &:before {
      content: '\201C'
    }
    &:after {
      content: '\201D'
    }
  }

  // list styles
  > ul, > ol {
    padding-left: 0;
    > li {
      @include remify( margin-left, 1.5 );
      @include formatted-text( 1, 0.75, 0.75, false );
    }
  }

  // remove margins from first and last element
  > *, > *.anecdote-title-an4a2q {
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}

/*---------------------------------------------------
--- 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, map-get($anecdote-spacing-an4a2q, standard) );
  @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 );
  }

  // sidebar captions (only when flexbox is supported)
  @supports ( display: flex ) {
    @include respond(min, tablet) {
      &.v-sidebar-caption {
        > .inner {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: flex-start;
          align-content: stretch;
          > .anecdote-intrinsic-embed-n42ha1 {
            order: 10;
            flex: 1 1 auto;
            align-self: flex-start;
          }
          > .anecdote-caption-ajkd3b {
            order: 20;
            padding-top: 0;
            @include remify( padding-left, 1 );
            flex: 0 0 230px;
            flex: 0 0 10.5rem;
            align-self: auto;
          }
        }
        &.v-sidebar-caption-left {
          > .inner > .anecdote-caption-ajkd3b {
            order: 1;
            @include remify( padding-right, 1 );
            padding-left: 0;
          }
        }
      }
    }
  }

}

/*---------------------------------------------------
--- 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;
    }
  }
  @supports ( display: flex ) {
    &.anecdote-flex-module-a4j2aj .flex-scope > .anecdote-module-3ba83n {
      @include remify( margin-left, 1 );
    }
  }
}


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

  // helper method for setting gutter spacing
  @mixin flow-modules-gutter-spacing-an32ka( $tmp-margin-size ) {
    // default gutter behavior
    @include remify( margin-left, $tmp-margin-size );
    &:first-child {
      margin-left: 0;
    }
    // reverse order gutter behavior
    @include scope-variation( '.v-reverse-order-on-flow' ) {
      @include remify( margin-left, $tmp-margin-size );
      &:last-child {
        margin-left: 0;
      }
    }
  }

  // flow modules helper (for looping over responsive breakpoints)
  @mixin flow-modules-an32ka {

    @supports ( display: flex ) {
      .anecdote-flex-offset-a4j2aj {
        display: block;
      }
      display: flex;
      justify-content: center;
      > .anecdote-module-3ba83n {
        flex: 1 1 auto;
        max-width: 100%;
        margin-top: 0;
        margin-bottom: 0;
      }

      &.v-reverse-order-on-flow {
        flex-direction: row-reverse;
      }

      // gutter spacing
      // TODO: support for nested flex modules with custom gutter spacing!
      > .anecdote-module-3ba83n {
        // default
        @include flow-modules-gutter-spacing-an32ka( 2.5 );
        // user-defined
        @include scope-variation( '.v-gutter-spacing-small' ) {
          @include flow-modules-gutter-spacing-an32ka( 1 );
        }
        @include scope-variation( '.v-gutter-spacing-medium' ) {
          @include flow-modules-gutter-spacing-an32ka( 2.5 );
        }
        @include scope-variation( '.v-gutter-spacing-large' ) {
          @include flow-modules-gutter-spacing-an32ka( 4 );
        }
      }

    }
  }
  &.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 {
  line-height: 1.5;
  @include formatted-text( 1.3, false, 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: Horizontal Lines
--------------------------------------------------- */

.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: Spacing
--------------------------------------------------- */

.anecdote-spacing-an4a2q {
  height: 1px;
  width: 100%;
  display: block;
  @include remify( margin-top margin-bottom, map-get($anecdote-spacing-an4a2q, standard) );
  &.v-tiny {
    @include remify( margin-top margin-bottom, map-get($anecdote-spacing-an4a2q, tiny) );
  }
  &.v-small {
    @include remify( margin-top margin-bottom, map-get($anecdote-spacing-an4a2q, small) );
  }
  &.v-standard {
    @include remify( margin-top margin-bottom, map-get($anecdote-spacing-an4a2q, standard) );
  }
  &.v-big {
    @include remify( margin-top margin-bottom, map-get($anecdote-spacing-an4a2q, big) );
  }
  &.v-mega {
    @include remify( margin-top margin-bottom, map-get($anecdote-spacing-an4a2q, mega) );
  }
}

.anecdote-adhoc-spacing-an4a2q {
  &, .anecdote-wysicontent-ndj4ab > & {
    &.an4a2q-v-none-top {
      @include remify( margin-top, 0 );
    }
    &.an4a2q-v-none-bottom {
      @include remify( margin-bottom, 0 );
    }
    &.an4a2q-v-tiny-top {
      @include remify( margin-top, map-get($anecdote-spacing-an4a2q, tiny) );
    }
    &.an4a2q-v-tiny-bottom {
      @include remify( margin-bottom, map-get($anecdote-spacing-an4a2q, tiny) );
    }
    &.an4a2q-v-small-top {
      @include remify( margin-top, map-get($anecdote-spacing-an4a2q, small) );
    }
    &.an4a2q-v-small-bottom {
      @include remify( margin-bottom, map-get($anecdote-spacing-an4a2q, small) );
    }
    &.an4a2q-v-standard-top {
      @include remify( margin-top, map-get($anecdote-spacing-an4a2q, standard) );
    }
    &.an4a2q-v-standard-bottom {
      @include remify( margin-bottom, map-get($anecdote-spacing-an4a2q, standard) );
    }
    &.an4a2q-v-big-top {
      @include remify( margin-top, map-get($anecdote-spacing-an4a2q, big) );
    }
    &.an4a2q-v-big-bottom {
      @include remify( margin-bottom, map-get($anecdote-spacing-an4a2q, big) );
    }
    &.an4a2q-v-mega-top {
      @include remify( margin-top, map-get($anecdote-spacing-an4a2q, mega) );
    }
    &.an4a2q-v-mega-bottom {
      @include remify( margin-bottom, map-get($anecdote-spacing-an4a2q, mega) );
    }
  }
}


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

.anecdote-primary-font-a3a8fb {

}
.anecdote-secondary-font-a3a8fb {

}

.anecdote-no-text-dimming-lk8j2n {

}
.anecdote-mild-text-dimming-lk8j2n {

}
.anecdote-medium-text-dimming-lk8j2n {

}
.anecdote-aggressive-text-dimming-lk8j2n {

}

.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 );
}

.anecdote-center-aligned-text-vnd5b3 {
  text-align: center;
}
.anecdote-right-aligned-text-vnd5b3 {
  text-align: right;
}
.anecdote-left-aligned-text-vnd5b3 {
  text-align: left;
}