@import "../settings.colors";

@import "tools.mixins";

// ------------------------------------
// General purpose mixins
// ------------------------------------

@mixin c-package--within-group--card-col-order($first, $second) {
  .c-card__col {
    order: $second;
    &:first-of-type {
      order: $first;
    }
  }
}

@mixin c-package--within-group--floating-card-border-add($margin: 10) {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    right: 0;
    z-index: 1;
    top: rem($margin);
    width: 1px;
    height: calc(100% - #{rem($margin * 2)});
    background: $color-stone-200;
  }
}

@mixin c-package--within-group--floating-card-border-remove {
  &::after {
    display: none;
  }
}

// ------------------------------------
// Small breakpoint
// ------------------------------------

@mixin c-package--within-group--group-sm {
  .c-package--within-group {
    // Lead card
    .c-package__stories > .u-wrapper:first-of-type .c-card,
    .c-package__col:first-of-type .c-card:first-of-type {
      padding: 0 rem(10) rem(10);
      .c-card__grid {
        @include grid-template-columns(rem(20), 1fr 1fr);
        @include grid-template-rows(0, 1fr);
      }
      .c-card__content {
        @include grid-column(2, 3, true);
        @include grid-row(1, 2);
        padding: 0;
      }
      .c-card__media {
        @include grid-column(1, 2, true);
        @include grid-row(1, 2);
        width: 100%;
      }
      .c-card__hed {
        @include font-hed(24, 27);
      }
      .c-card__dek {
        @include font-hed(17, 20, normal);
      }
    }
  }
  .c-package--within-group--lead {
    // Lead card
    .c-package__stories > .u-wrapper:first-of-type .c-card,
    .c-package__col:first-of-type .c-card:first-of-type {
      .c-card__hed {
        @include font-hed(28, 31);
      }
    }
  }
  .c-package--within-group--standard {
    // Hide lead card's photo
    .c-package__stories > .u-wrapper:first-of-type .c-card,
    .c-package__col:first-of-type .c-card:first-of-type {
      .c-card__grid {
        @include grid-template-columns(0, 1fr);
      }
      .c-card__content {
        @include grid-column(1, 2);
      }

      .c-card__media {
        display: none;
      }
    }
    // If the number of cards is greater than 2, hide the lead card's deck
    &.c-package--contains-over-2-cards {
      // Lead card
      .c-package__stories > .u-wrapper:first-of-type .c-card,
      .c-package__col:first-of-type .c-card:first-of-type {
        .c-card__dek {
          display: none;
        }
      }
    }
  }
  .c-package--within-group--display {
    // Lead card
    .c-package__stories > .u-wrapper:first-of-type .c-card,
    .c-package__col:first-of-type .c-card:first-of-type {
      padding-bottom: rem(10);
      .c-card__col {
        padding-left: rem(10);
        padding-right: rem(10);
        &:first-of-type {
          padding-top: 0;
        }
      }
    }
  }
  // G1 packages require a separate treatment because they contain
  // "c-package__col" containers, whereas the other package types don't
  .c-package--within-group:not(.c-package--within-group--g1) {
    // 2-column card layout (lead card remains full-width)
    .u-wrapper {
      flex: 50%;
      max-width: 50%; // For IE11
      // (see https://stackoverflow.com/questions/21942183/multiline-flexbox-in-ie11-calculating-widths-incorrectly#answer-21950351)
      &:first-of-type {
        flex: 100%;
        max-width: none;
      }
      &:nth-child(even) {
        @include c-package--within-group--floating-card-border-add;
      }
      &:nth-last-of-type(2):nth-child(even) {
        border-bottom: none;
      }
      &:last-of-type:nth-child(even) {
        flex: 100%;
        max-width: none;
        // Hide the floating border for the last card,
        // if there are an even number of cards
        @include c-package--within-group--floating-card-border-remove;
      }
    }
  }
  @include c-package--within-group--group-g1-sm;
  @include c-package--within-group--group-g3-sm;
}

@mixin c-package--within-group--group-g1-sm {
  .c-package--within-group--g1 {
    .c-package__col:last-of-type {
      // 2-column card layout
      // (lead card remains full-width because it's inside the first "c-package__col")
      @include flex-display;
      .u-wrapper {
        flex: 50%;
        max-width: 50%; // For IE11
        // (see https://stackoverflow.com/questions/21942183/multiline-flexbox-in-ie11-calculating-widths-incorrectly#answer-21950351)
        &:nth-child(odd) {
          @include c-package--within-group--floating-card-border-add;
        }
        &:nth-last-of-type(2):nth-child(odd) {
          border-bottom: none;
        }
        &:last-of-type:nth-child(odd) {
          flex: 100%;
          max-width: none;
          // Hide the floating border for the last card,
          // if there are an odd number of cards
          @include c-package--within-group--floating-card-border-remove;
        }
      }
    }
  }
}

@mixin c-package--within-group--group-g3-sm {
  .c-package--within-group--g3 {
    // Lead card
    .c-package__stories > .u-wrapper:first-of-type .c-card,
    .c-package__col:first-of-type .c-card:first-of-type {
      .c-card__dek {
        @include font-hed(15, 18, normal);
      }
    }
    &.c-package--within-group--lead {
      // Lead card
      .c-package__stories > .u-wrapper:first-of-type .c-card,
      .c-package__col:first-of-type .c-card:first-of-type {
        .c-card__dek {
          @include font-hed(17, 20, normal);
        }
      }
    }
    // Unlike every other package type, "G3 Standard + Not-Lead" does
    // not arrange its cards into a 2-column layout at this breakpoint
    &.c-package--within-group--standard:not(.c-package--within-group--lead) {
      .u-wrapper {
        // Revert back to a single-column card layout
        flex: 100%;
        max-width: none;
        // Hide the floating border
        &:nth-child(even) {
          @include c-package--within-group--floating-card-border-remove;
        }
        &:nth-last-of-type(2):nth-child(even) {
          border-bottom: 1px solid $color-stone-200;
        }
      }
    }
  }
}

// ------------------------------------
// Medium breakpoint
// ------------------------------------

@mixin c-package--within-group--group-md {
  .c-package--within-group--lead {
    // Lead card
    .c-package__stories > .u-wrapper:first-of-type .c-card,
    .c-package__col:first-of-type .c-card:first-of-type {
      .c-card__hed {
        @include font-hed(38, 41);
      }
      .c-card__dek {
        @include font-hed(24, 27, normal);
      }
    }
  }
  @include c-package--within-group--group-g2-md;
  @include c-package--within-group--group-g3-md;
}

@mixin c-package--within-group--group-g2-md {
  .c-package--within-group--g2 {
    // Lead card
    .c-package__stories > .u-wrapper:first-of-type .c-card,
    .c-package__col:first-of-type .c-card:first-of-type {
      .c-card__hed {
        @include font-hed(32, 35);
      }
      .c-card__dek {
        @include font-hed(19, 22, normal);
      }
    }
    &.c-package--within-group--lead {
      // Lead card
      .c-package__stories > .u-wrapper:first-of-type .c-card,
      .c-package__col:first-of-type .c-card:first-of-type {
        .c-card__hed {
          @include font-hed(38, 41);
        }
        .c-card__dek {
          @include font-hed(24, 27, normal);
        }
      }
    }
  }
}

@mixin c-package--within-group--group-g3-md {
  .c-package--within-group--g3 {
    // Lead card
    .c-package__stories > .u-wrapper:first-of-type .c-card,
    .c-package__col:first-of-type .c-card:first-of-type {
      .c-card__hed {
        @include font-hed(24, 27);
      }
      .c-card__dek {
        @include font-hed(15, 18, normal);
      }
    }
    &.c-package--within-group--lead {
      // Lead card
      .c-package__stories > .u-wrapper:first-of-type .c-card,
      .c-package__col:first-of-type .c-card:first-of-type {
        .c-card__hed {
          @include font-hed(38, 41);
        }
        .c-card__dek {
          @include font-hed(24, 27, normal);
        }
      }
    }
    // Unlike every other package type, "G3 Display + Not-Lead" swaps
    // the position of its photo and text, at this breakpoint
    &.c-package--within-group--display:not(.c-package--within-group--lead) {
      // Lead card
      .c-package__stories > .u-wrapper:first-of-type .c-card,
      .c-package__col:first-of-type .c-card:first-of-type {
        .c-card__content {
          @include grid-column(1, 2);
        }
        .c-card__media {
          @include grid-column(2, 3);
        }
      }
    }
  }
}

// ------------------------------------
// Large breakpoint
// ------------------------------------

@mixin c-package--within-group--group-lg {
  // All "standard" packages revert back to a single-column card layout
  .c-package--within-group--standard:not(.c-package--within-group--g1) {
    .u-wrapper {
      // Revert back to a single-column card layout
      flex: 100%;
      max-width: none;
      // Hide the floating border
      &:nth-child(even) {
        @include c-package--within-group--floating-card-border-remove;
      }
      &:nth-last-of-type(2):nth-child(even) {
        border-bottom: 1px solid $color-stone-200;
      }
    }
  }
  @include c-package--within-group--group-g1-lg;
  @include c-package--within-group--group-g2-lg;
  @include c-package--within-group--group-g3-lg;
}

@mixin c-package--within-group--group-g1-lg {
  .c-package--within-group--g1 {
    // Lead card
    .c-package__stories > .u-wrapper:first-of-type .c-card,
    .c-package__col:first-of-type .c-card:first-of-type {
      .c-card__hed {
        @include font-hed(38, 41);
      }
      .c-card__dek {
        @include font-hed(24, 27, normal);
      }
    }
    .c-package__label {
      border-width: 0;
    }
    .c-package__col {
      flex: 1;
      &:first-of-type {
        flex: 3;
        .u-wrapper:last-of-type {
          border-width: 0;
        }
      }
      &:last-of-type {
        border-left: 1px solid $color-stone-200;
        display: block;
        .u-wrapper {
          flex: 100%;
          max-width: none;
          @include c-package--within-group--floating-card-border-remove;
          &:first-of-type {
            .c-card {
              padding-top: 0;
            }
          }
          &:nth-last-of-type(2):nth-child(odd) {
            border-bottom: 1px solid $color-stone-200;
          }
          &:last-of-type {
            border-width: 0;
          }
        }
      }
    }
  }
}

@mixin c-package--within-group--group-g2-lg {
  .c-package--within-group--g2 {
    // Lead card
    .c-package__stories > .u-wrapper:first-of-type .c-card,
    .c-package__col:first-of-type .c-card:first-of-type {
      .c-card__hed {
        @include font-hed(32, 35);
      }
      .c-card__dek {
        @include font-hed(19, 22, normal);
      }
    }
    &.c-package--within-group--lead {
      // Lead card
      .c-package__stories > .u-wrapper:first-of-type .c-card,
      .c-package__col:first-of-type .c-card:first-of-type {
        .c-card__content {
          @include grid-column(1, 2, true);
        }
        .c-card__media {
          @include grid-column(2, 3, true);
        }
        .c-card__hed {
          @include font-hed(38, 41);
        }
        .c-card__dek {
          @include font-hed(24, 27, normal);
        }
      }
    }
    &.c-package--within-group--standard.c-package--within-group--lead {
      // Lead card
      .c-package__stories > .u-wrapper:first-of-type .c-card,
      .c-package__col:first-of-type .c-card:first-of-type {
        .c-card__dek {
          @include font-hed(19, 22, normal);
        }
      }
    }
    &.c-package--within-group--display.c-package--within-group--lead {
      // Lead card
      .c-package__stories > .u-wrapper:first-of-type .c-card,
      .c-package__col:first-of-type .c-card:first-of-type {
        @include c-package--within-group--card-col-order(1, 2);
      }
    }
  }
}

@mixin c-package--within-group--group-g3-lg {
  .c-package--within-group--g3 {
    // Lead card
    .c-package__stories > .u-wrapper:first-of-type .c-card,
    .c-package__col:first-of-type .c-card:first-of-type {
      .c-card__hed {
        @include font-hed(24, 27);
      }
      .c-card__dek {
        @include font-hed(15, 18, normal);
      }
    }
    &.c-package--within-group--standard.c-package--within-group--lead {
      // Lead card
      .c-package__stories > .u-wrapper:first-of-type .c-card,
      .c-package__col:first-of-type .c-card:first-of-type {
        .c-card__hed {
          @include font-hed(32, 35);
        }
        .c-card__dek {
          @include font-hed(15, 18, normal);
        }
      }
    }
    &.c-package--within-group--display.c-package--within-group--lead {
      // Lead card
      .c-package__stories > .u-wrapper:first-of-type .c-card,
      .c-package__col:first-of-type .c-card:first-of-type {
        // @include c-package--within-group--card-col-order(1, 2);
        .c-card__content {
          @include grid-column(1, 2);
        }
        .c-card__hed {
          @include font-hed(28, 31);
        }
        .c-card__dek {
          @include font-hed(17, 20, normal);
        }
        .c-card__media {
          @include grid-column(2, 3);
        }
      }
    }
    &.c-package--within-group--display:not(.c-package--within-group--lead) {
      // Lead card
      .c-package__stories > .u-wrapper:first-of-type .c-card,
      .c-package__col:first-of-type .c-card:first-of-type {
        .c-card__content {
          @include grid-column(2, 3);
        }
        .c-card__media {
          @include grid-column(1, 2);
        }
      }
    }
  }
}
