@import "../settings.colors";

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

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

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

@mixin o-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 o-package--within-group--floating-card-border-remove {
  &::after {
    display: none;
  }
}

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

@mixin o-package--within-group--group-sm {
  .o-package--within-group {
    // Lead card
    .o-package__stories > .u-wrapper:first-of-type .o-card,
    .o-package__col:first-of-type .o-card:first-of-type {
      .o-card__col {
        flex: 1;
        &:first-of-type {
          flex: 1;
          padding: 0 rem(10) rem(10);
        }
      }
      .o-card__hed {
        @include font24b;
      }
      .o-card__dek {
        @include font17r;
      }
    }
  }
  .o-package--within-group--lead {
    // Lead card
    .o-package__stories > .u-wrapper:first-of-type .o-card,
    .o-package__col:first-of-type .o-card:first-of-type {
      .o-card__hed {
        @include font28b;
      }
    }
  }
  .o-package--within-group--standard {
    // Hide lead card's photo
    .o-package__stories > .u-wrapper:first-of-type .o-card,
    .o-package__col:first-of-type .o-card:first-of-type {
      .o-card__col {
        display: none;
        &:first-of-type {
          display: block;
        }
      }
    }
    // If the number of cards is greater than 2, hide the lead card's deck
    &.o-package--contains-over-2-cards {
      // Lead card
      .o-package__stories > .u-wrapper:first-of-type .o-card,
      .o-package__col:first-of-type .o-card:first-of-type {
        .o-card__dek {
          display: none;
        }
      }
    }
  }
  .o-package--within-group--display {
    // Lead card
    .o-package__stories > .u-wrapper:first-of-type .o-card,
    .o-package__col:first-of-type .o-card:first-of-type {
      padding-bottom: rem(10);
      .o-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
  // "o-package__col" containers, whereas the other package types don't
  .o-package--within-group:not(.o-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 o-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 o-package--within-group--floating-card-border-remove;
      }
    }
  }
  @include o-package--within-group--group-g1-sm;
  @include o-package--within-group--group-g3-sm;
}

@mixin o-package--within-group--group-g1-sm {
  .o-package--within-group--g1 {
    .o-package__col:last-of-type {
      // 2-column card layout
      // (lead card remains full-width because it's inside the first "o-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 o-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 o-package--within-group--floating-card-border-remove;
        }
      }
    }
  }
}

@mixin o-package--within-group--group-g3-sm {
  .o-package--within-group--g3 {
    // Lead card
    .o-package__stories > .u-wrapper:first-of-type .o-card,
    .o-package__col:first-of-type .o-card:first-of-type {
      .o-card__dek {
        @include font15r;
      }
    }
    &.o-package--within-group--lead {
      // Lead card
      .o-package__stories > .u-wrapper:first-of-type .o-card,
      .o-package__col:first-of-type .o-card:first-of-type {
        .o-card__dek {
          @include font17r;
        }
      }
    }
    // Unlike every other package type, "G3 Standard + Not-Lead" does
    // not arrange its cards into a 2-column layout at this breakpoint
    &.o-package--within-group--standard:not(.o-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 o-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 o-package--within-group--group-md {
  .o-package--within-group--lead {
    // Lead card
    .o-package__stories > .u-wrapper:first-of-type .o-card,
    .o-package__col:first-of-type .o-card:first-of-type {
      .o-card__hed {
        @include font38b;
      }
      .o-card__dek {
        @include font24r;
      }
    }
  }
  @include o-package--within-group--group-g2-md;
  @include o-package--within-group--group-g3-md;
}

@mixin o-package--within-group--group-g2-md {
  .o-package--within-group--g2 {
    // Lead card
    .o-package__stories > .u-wrapper:first-of-type .o-card,
    .o-package__col:first-of-type .o-card:first-of-type {
      .o-card__hed {
        @include font32b;
      }
      .o-card__dek {
        @include font19r;
      }
    }
    &.o-package--within-group--lead {
      // Lead card
      .o-package__stories > .u-wrapper:first-of-type .o-card,
      .o-package__col:first-of-type .o-card:first-of-type {
        .o-card__hed {
          @include font38b;
        }
        .o-card__dek {
          @include font24r;
        }
      }
    }
  }
}

@mixin o-package--within-group--group-g3-md {
  .o-package--within-group--g3 {
    // Lead card
    .o-package__stories > .u-wrapper:first-of-type .o-card,
    .o-package__col:first-of-type .o-card:first-of-type {
      .o-card__hed {
        @include font24b;
      }
      .o-card__dek {
        @include font15r;
      }
    }
    &.o-package--within-group--lead {
      // Lead card
      .o-package__stories > .u-wrapper:first-of-type .o-card,
      .o-package__col:first-of-type .o-card:first-of-type {
        .o-card__hed {
          @include font38b;
        }
        .o-card__dek {
          @include font24r;
        }
      }
    }
    // Unlike every other package type, "G3 Display + Not-Lead" swaps
    // the position of its photo and text, at this breakpoint
    &.o-package--within-group--display:not(.o-package--within-group--lead) {
      // Lead card
      .o-package__stories > .u-wrapper:first-of-type .o-card,
      .o-package__col:first-of-type .o-card:first-of-type {
        @include o-package--within-group--card-col-order(1, 2);
      }
    }
  }
}

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

@mixin o-package--within-group--group-lg {
  // All "standard" packages revert back to a single-column card layout
  .o-package--within-group--standard:not(.o-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 o-package--within-group--floating-card-border-remove;
      }
      &:nth-last-of-type(2):nth-child(even) {
        border-bottom: 1px solid $color-stone-200;
      }
    }
  }
  @include o-package--within-group--group-g1-lg;
  @include o-package--within-group--group-g2-lg;
  @include o-package--within-group--group-g3-lg;
}

@mixin o-package--within-group--group-g1-lg {
  .o-package--within-group--g1 {
    // Lead card
    .o-package__stories > .u-wrapper:first-of-type .o-card,
    .o-package__col:first-of-type .o-card:first-of-type {
      .o-card__hed {
        @include font38b;
      }
      .o-card__dek {
        @include font24r;
      }
    }
    .o-package__label {
      border-width: 0;
    }
    .o-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 o-package--within-group--floating-card-border-remove;
          &:first-of-type {
            .o-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 o-package--within-group--group-g2-lg {
  .o-package--within-group--g2 {
    // Lead card
    .o-package__stories > .u-wrapper:first-of-type .o-card,
    .o-package__col:first-of-type .o-card:first-of-type {
      .o-card__hed {
        @include font32b;
      }
      .o-card__dek {
        @include font19r;
      }
    }
    &.o-package--within-group--lead {
      // Lead card
      .o-package__stories > .u-wrapper:first-of-type .o-card,
      .o-package__col:first-of-type .o-card:first-of-type {
        .o-card__hed {
          @include font38b;
        }
        .o-card__dek {
          @include font24r;
        }
      }
    }
    &.o-package--within-group--standard.o-package--within-group--lead {
      // Lead card
      .o-package__stories > .u-wrapper:first-of-type .o-card,
      .o-package__col:first-of-type .o-card:first-of-type {
        .o-card__dek {
          @include font19r;
        }
      }
    }
    &.o-package--within-group--display.o-package--within-group--lead {
      // Lead card
      .o-package__stories > .u-wrapper:first-of-type .o-card,
      .o-package__col:first-of-type .o-card:first-of-type {
        @include o-package--within-group--card-col-order(1, 2);
      }
    }
  }
}

@mixin o-package--within-group--group-g3-lg {
  .o-package--within-group--g3 {
    // Lead card
    .o-package__stories > .u-wrapper:first-of-type .o-card,
    .o-package__col:first-of-type .o-card:first-of-type {
      .o-card__hed {
        @include font24b;
      }
      .o-card__dek {
        @include font15r;
      }
    }
    &.o-package--within-group--standard.o-package--within-group--lead {
      // Lead card
      .o-package__stories > .u-wrapper:first-of-type .o-card,
      .o-package__col:first-of-type .o-card:first-of-type {
        .o-card__hed {
          @include font32b;
        }
        .o-card__dek {
          @include font15r;
        }
      }
    }
    &.o-package--within-group--display.o-package--within-group--lead {
      // Lead card
      .o-package__stories > .u-wrapper:first-of-type .o-card,
      .o-package__col:first-of-type .o-card:first-of-type {
        @include o-package--within-group--card-col-order(1, 2);
        .o-card__hed {
          @include font28b;
        }
        .o-card__dek {
          @include font17r;
        }
      }
    }
    &.o-package--within-group--display:not(.o-package--within-group--lead) {
      // Lead card
      .o-package__stories > .u-wrapper:first-of-type .o-card,
      .o-package__col:first-of-type .o-card:first-of-type {
        @include o-package--within-group--card-col-order(2, 1);
      }
    }
  }
}
