@import "tools.mixins";

// ------------------------------------
// Shared
// ------------------------------------

@mixin o-member-story-list-x-column($display: flex, $wrap: wrap, $flow: "") {
  @include flex-display($display, $wrap, $flow);
  justify-content: space-between;
  width: 100%; // Fix for IE11, when component is nested inside of a grid column
}

@mixin o-member-story-list-5-column($margin: rem(8)) {
  .u-wrapper {
    flex-basis: calc(20% - #{$margin * 2});
    margin-right: $margin;
    &:last-of-type,
    &:nth-of-type(5n) {
      margin-right: 0;
    }
  }
}

// ------------------------------------
// Member Benefits
// ------------------------------------

@mixin o-member-story-list-benefits-sm-up {
  .o-member--story-list--benefits {
    @include o-member-story-list-x-column;
  }
}

@mixin o-member-story-list-benefits-sm {
  .o-member--story-list--benefits {
    width: rem(768);
    @include o-member-story-list-5-column($margin: rem(8));
  }
}

@mixin o-member-story-list-benefits-md {
  .o-member--story-list--benefits {
    width: rem(976);
  }
}

@mixin o-member-story-list-benefits-md-up {
  .o-member--story-list--benefits {
    @include o-member-story-list-5-column($margin: rem(16));
    .c-card__link {
      &:hover,
      &:focus,
      &:active {
        // sass-lint:disable nesting-depth
        .c-card__dek {
          padding: 0 rem(20);
        }

        .c-card__content {
          transform: scale(1.2); // bg image
        }
        // sass-lint:enable nesting-depth
      }
    }
  }
}

@mixin o-member-story-list-benefits-lg-up {
  .o-member--story-list--benefits {
    width: rem(1168);
    @include o-member-story-list-5-column($margin: rem(19.2));
  }
}

@mixin o-member-story-list-benefits-bgs($imgs...) {
  .o-member--story-list--benefits {
    // Just the first card
    $img: nth($imgs, 1);
    .u-wrapper:nth-child(1) .c-card__content {
      // https://css-tricks.com/tinted-images-multiple-backgrounds/
      background: linear-gradient(rgba(0, 0, 0, 0.67), rgba(0, 0, 0, 0.67)), url("#{$img}");
    }
    // All the remaining cards
    @if length($imgs) > 1 {
      @for $i from 2 through length($imgs) {
        $img: nth($imgs, $i);
        .u-wrapper:nth-child(#{$i}) .c-card__content {
          background-image: url("#{$img}");
        }
      }
    }
  }
}
