// Mixins

// Breakpoints

@mixin breakpoint($class) {
  @if $class == md {
    @media (min-width: 767px) {
      @content;
    }
  }
  @else if $class == lg {
    @media (min-width: 1200px) {
      @content;
    }
  }
}

@mixin md() {
  @include breakpoint(md) {
    @content;
  }
}

@mixin breakpoint-max($class) {
  @if $class == sm {
    @media (max-width: 480px) {
      @content;
    }
  }
  @else if $class == md {
    @media (max-width: 766px) {
      @content;
    }
  }
  @else if $class == lg {
    @media (max-width: 1199px) {
      @content;
    }
  }
}

// Clearfix

@mixin clearfix {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

@mixin vertical-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  transform-style: preserve-3d;
}

@mixin text-truncate {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

@mixin list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-reset {
  @include list-reset;
}

/**
 * Typography
 */
@mixin campaign-title {
  margin-bottom: 1em;
  font-weight: 800;
  letter-spacing: -1px;
  font-size: 26px;
  line-height: 1.2;
  word-break: break-word;
  @include md {
    line-height: 1;
    font-size: 48px;
  }
}

@mixin campaign-headline {
  @include campaign-title;
  margin-bottom: 0;
}

@mixin campaign-title-center {
  @include campaign-title;
  color: $text-color-strong;
}

@mixin campaign-title-separator {
  @include campaign-title;
  color: #969696;
  letter-spacing: 2px;
  text-align: center;
  border-bottom: 1px solid #969696;
  padding-bottom: 1em;
  text-transform: uppercase;
  font-size: 1em;
  @include md {
    font-size: .9em;
    line-height: 1.5;
  }
}

@mixin campaign-title-item {
  @include campaign-title;
  color: $text-color-strong;
  letter-spacing: -1px;
  margin-top: 0;
  @include md {
    line-height: 1.2;
    font-size: 24px;
  }
}

@mixin campaign-lead {
  line-height: 27px;
  font-size: 20px;
  letter-spacing: -.5px;
  margin-bottom: .5em;
}

// mixin
@mixin slope($position: 'before', $angle: 3.5deg, $flip: true) {
  position: relative;
  z-index: 1;

  @if $flip {
    $angle: $angle * -1;
  }

  &::#{$position} {
    background: inherit;
    content: ' ';
    display: block;
    height: 1000px; // height fallback
    height: 100vh;
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    transform: skewY($angle) translateZ(0);

    // Mobile Safari 'AA' fix for jagged edges
    backface-visibility: hidden;
    outline: 1px solid transparent;

    @if $position == 'before' {
      top: 0;
      @if ($flip) {
        transform-origin: 0 0;
      }
      @else {
        transform-origin: 100% 0;
      }
    }

    @if $position == 'after' {
      bottom: 0;
      @if ($flip) {
        transform-origin: 100%;
      }
      @else {
        transform-origin: 0 0;
      }
    }

  }
}