@import "tools.mixins";
@import "objects.homepage-cards";

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

@mixin o-package-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 package is nested inside of a grid column
}

@mixin o-package-story-list-2-column($margin: rem(20)) {
  .u-wrapper {
    flex-basis: calc(50% - #{$margin * 2});
    margin-right: $margin;
    &:nth-of-type(even) {
      margin-right: 0;
    }
  }
}

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

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

// ------------------------------------
// Basic
// ------------------------------------

@mixin o-package-story-list-basic-sm {
  .o-package--story-list--basic {
    @include o-package-story-list-x-column;
    @include o-package-story-list-2-column;
  }
}

@mixin o-package-story-list-basic-md {
  .o-package--story-list--basic {
    @include o-package-story-list-4-column;
  }
}

// ------------------------------------
// Numbered
// ------------------------------------

@mixin o-package-story-list-numbered-sm {
  .o-package--story-list--numbered {
    @include o-package-story-list-x-column;
    @include o-package-story-list-2-column;
  }
}

@mixin o-package-story-list-numbered-md {
  .o-package--story-list--numbered {
    @include o-package-story-list-4-column;
  }
}

// ------------------------------------
// Cards
// ------------------------------------

@mixin o-package-story-list-cards-sm {
  .o-package--story-list--cards {
    @include o-package-story-list-x-column($flow: row wrap, $wrap: "");
    @include o-package-story-list-2-column;
  }
}

@mixin o-package-story-list-cards-lg {
  .o-package--story-list--cards {
    @include o-package-story-list-4-column;
  }
}

// ------------------------------------
// A-Stack
// ------------------------------------

@mixin o-package-story-list-a-stack-sm-to-md {
  .o-package--story-list--a-stack {
    @include o-package-story-list-x-column;
    @include o-package-story-list-2-column;
    .u-wrapper:nth-of-type(2) {
      .o-card {
        padding-top: 0;
      }
    }
  }
}

@mixin o-package-story-list-a-stack-md {
  .o-package--story-list--a-stack {
    .u-wrapper {
      &:nth-of-type(2) {
        .o-card {
          padding-top: rem(10);
        }
      }
    }
    .o-card__content .o-card__col:first-of-type {
      flex: 100%;
      margin-right: 0;
    }
    .o-card__hed {
      font-size: rem(19);
    }
    .c-image {
      display: none;
    }
  }
}

@mixin o-package-story-list-a-stack-lg {
  .o-package--story-list--a-stack {
    .o-card__content .o-card__col:first-of-type {
      flex: 3;
      margin-right: rem(10);
    }
    .c-image {
      display: block;
    }
  }
}

// ------------------------------------
// Engagement
// ------------------------------------

@mixin o-package-story-list-engagement-sm-up {
  .o-package--story-list--engagement {
    @include o-package-story-list-x-column;
  }
}

@mixin o-package-story-list-engagement-sm {
  .o-package--story-list--engagement {
    @include o-package-story-list-2-column($margin: rem(50));
    .u-wrapper {
      &:nth-of-type(2) {
        .o-card {
          display: block;
        }
      }
    }
  }
}

@mixin o-package-story-list-engagement-md {
  .o-package--story-list--engagement {
    @include o-package-story-list-3-column($margin: rem(50));
  }
}

@mixin o-package-story-list-engagement-md-up {
  .o-package--story-list--engagement {
    .u-wrapper {
      &:nth-of-type(2), &:nth-of-type(3) {
        .o-card {
          display: block;
        }
      }
    }
  }
}

@mixin o-package-story-list-engagement-lg-up {
  .o-package--story-list--engagement {
    @include o-package-story-list-3-column($margin: rem(60));
  }
}
