@import "settings.breakpoints";
@import "settings.fonts";
@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";
@import "mixins/base.focus";
@import "mixins/objects.card";
@import "mixins/objects.homepage-cards";
@import "mixins/components.label";

// Packages with special treatments for "lead" cards
@mixin o-package-lead-card {
  .o-card:first-of-type {
    @include o-card--lead;
    @include mq($from: tablet) {
      @include o-card--lead--tablet;
    }
    @include mq($from: tabletMedium) {
      @include o-card--lead--tablet-medium;
    }
    @include mq($from: desktop) {
      @include o-card--lead--desktop;
    }
  }
}

// Packages with lead card treatments and no "o-package__col" columns
.o-package--single-topic {
  .o-package__stories > {
    @include o-package-lead-card;
  }
}
// Packages with lead card treatments and "o-package__col" columns
.o-package--single-topic--inverted {
  .o-package__col:first-of-type {
    @include o-package-lead-card;
  }
}

///////////////////////////
// Single Section Packages
///////////////////////////

// Hide images in all cards except for the lead card
.o-package--single-section--muted,
.o-package--single-section--muted--stacked,
.o-package--single-section--muted--stacked--bold {
  .o-card:nth-of-type(n+2) .o-card__col:nth-of-type(n+2) {
    display: none;
  }
}

.o-package--single-section--muted--stacked--bold {
  .o-card, .o-package__button {
    flex: 100%;
  }
  @include mq($from: tablet) {
    .o-card__col:first-of-type {
      flex: 2;
    }
    .o-card:last-of-type {
      border-width: 0 1px 0 0;
    }
    .o-package__button {
      display: block;
    }
  }
  @include mq($from: tabletMedium) {
    .o-card:last-of-type {
      border-width: 0 1px 1px 0;
      border-style: solid;
      border-color: $color-stone-200;
    }
    .o-package__button {
      display: none;
    }
  }
  @include mq($from: tabletMedium) {
    .o-card:first-of-type {
      .o-card__hed {
        @include font17b;
      }
    }
  }
}

.o-package--single-section--video {
  border-width: 1px;
  position: relative;
  .o-package__stories {
    margin-top: 0;
  }
  .o-card, .o-card:last-of-type, .o-package__label {
    border-width: 0;
  }
  .o-card__dek {
    display: none;
  }
  @include mq($from: tablet, $until: tabletMedium) {
    .o-package__label {
      position: absolute;
    }
    .o-package__stories {
      margin-top: rem(10);
    }
  }
  @include mq($from: tabletMedium) {
    .o-package__col:first-of-type {
      .o-card__dek {
        display: block;
      }
    }
    .o-package__label {
      position: relative;
    }
    .o-package__stories {
      margin-top: 0;
    }
  }

  .o-package__col {
    flex: 100%;
    &:first-of-type {
      .o-card {
        padding: 0;
      }
      .o-card__content {
        flex-wrap: wrap;
      }
      .o-card__col {
        flex: 100%;
        order: 1;
        &:first-of-type {
          order: 2;
          padding: rem(10);
        }
      }
    }
    &:last-of-type {
      .o-card {
        .o-card__hed {
          @include font-gm-sans;
          font-size: rem(14);
          line-height: line-height(14, 16);
          color: $color-grey-660;
        }
      }
      // Hide play button for every card except for the lead card
      .c-article-media__info {
        display: none;
      }
    }

    @include mq($from: tablet) {
      &:first-of-type {
        flex-grow: 0;
        flex-basis: 80%;
        margin: auto;
        .o-card__hed {
          @include font24b;
        }
      }
      &:last-of-type {
        @include flex-display;
        .o-card {
          flex-basis: 0;
        }
        .o-card__content {
          flex-wrap: wrap;
        }
        .o-card__col {
          flex: 100%;
          order: 1;
          &:first-of-type {
            order: 2;
            padding: rem(10);
          }
        }
      }
    }

    @include mq($from: tabletMedium) {
      flex: 1;
      &:first-of-type {
        flex: 1;
        margin: inherit;
        .o-card {
          padding: rem(10);
        }
        .o-card__dek {
          display: none;
          @include font17r;
        }
      }
      &:last-of-type {
        display: flex;
        align-self: flex-start;
        flex: 1.5;
        .o-card__col {
          flex: 0 0 rem(120);
          .o-card__hed {
            @include font17r;
            color: $color-grey-900;
          }
          &:first-of-type {
            flex: 1.5;
            padding: 0 rem(10) rem(10) rem(10);
            margin-right: 0;
          }
        }
        .o-card,
        .u-wrapper {
          flex-basis: 50%;
        }
      }
    }

    @include mq($from: desktop) {
      &:last-of-type {
        .o-card__col {
          flex: 0 0 rem(160);
          .o-card__hed {
            @include font17r;
          }
        }
      }
    }
  }
}

///////////////////////////
// Single Topic Packages
///////////////////////////
.o-package--single-topic {
  background-color: $color-white;
  .o-package__label {
    font-size: rem(12);
    line-height: line-height(12, 12);
    color: $color-grey-660;
    border-width: 0 1px 0 0;
  }
  .o-card {
    margin-bottom: 0;
    margin-top: 0;
    border-width: 0 1px 1px 0;
    border-style: solid;
    flex: 100%;

    .c-image {
      display: none;
    }
  }
  .o-package__stories > .o-card {
    &:first-of-type {
      .c-image {
        display: block;
      }
    }
  }

  .o-card__dek {
    display: none;
  }

  @include mq($from: tablet) {
    @include flex-display($flow: row wrap, $wrap: "");
    justify-content: space-between;

    .o-package__label {
      flex: 100%;
      border-width: 0 1px 1px 0;
    }

    .o-card {
      flex-basis: calc(50% - #{rem(22)});
      .c-image {
        display: block;
      }
    }

    .o-package__stories > .o-card,
    .o-package__stories > .o-card:first-of-type {
      .o-card__col {
        order: 2;
        flex: 1;
        &:first-of-type {
          order: 1;
          flex: 3;
        }
      }
      .o-card__hed {
        @include font19b;
      }
    }

    .o-package__stories > .o-card:first-of-type {
      padding: rem(10);
      .o-card__col {
        padding: 0;
        &:first-of-type {
          margin-right: rem(10);
          padding: 0;
        }
      }
    }
  }

  @include mq($from: tabletMedium) {
    .o-card__content {
      flex-wrap: wrap;
    }
    .o-card {
      flex-basis: calc(25% - #{rem(40)});
    }
    .o-package__stories > .o-card,
    .o-package__stories > .o-card:first-of-type {
      .o-card__col {
        order: 1;
        flex: 100%;
        &:first-of-type {
          order: 2;
          flex: 100%;
          padding: rem(10) 0;
          margin-right: 0;
        }
      }
    }
    .o-package__stories > .o-card:first-of-type {
      .o-card__hed {
        @include font19b;
      }
    }
  }

  @include mq($from: desktop) {
    .o-package__stories > .o-card:first-of-type {
      .o-card__hed {
        @include font19b;
      }
    }
  }
}

// Key icon changes opacity when subscribed user
// is logged in and key is on a dark background
.u-user-role--subscribed {
  .o-package--single-topic--inverted {
    .c-indicator-icon__art--key {
      fill: $color-stone-300;
      opacity: 0.5;
    }
  }
}

.o-package--single-topic--inverted {
  .o-card__content-text,
  .o-card__hed,
  .o-card__dek,
  .o-card__meta,
  .o-package__label,
  .o-package__label-link,
  .o-card__hed__duration {
    color: $color-white;
  }
  .c-indicator-icon__art {
    fill: $color-white;
  }

  .c-indicator-icon__art--canpro--inverted {
    fill: $color-canpro-300;
  }

  .c-indicator-icon__art--ga--inverted {
    fill: $color-blue-200;
  }

  .o-package__label {
    border-width: 0;
    padding: rem(10) 0 0;
    font-size: rem(12);
  }

  .o-card__label {
    margin-bottom: rem(5);
  }
  .o-card__meta {
    margin-top: rem(5);
  }

  .o-card__link {
    &:visited {
      .o-card__hed-text {
        color: $color-stone-200;
      }
    }
    &:hover,
    &:focus {
      .o-card__hed-text {
        color: $color-white;
      }
    }
    &:focus,
    &:hover:focus {
      @include focus-outline-inverted;
    }
    &:active {
      .o-card__hed-text {
        color: $color-stone-500;
      }
    }
  }


  @include mq($from: desktop) {
    border-width: 1px;
    .o-package__label {
      border-width: 0;
    }
  }

  .o-package__col:first-of-type .o-card:first-of-type {
    @include o-card-hed-single-md;
    background-color: transparent;
    padding: rem(10) 0;
    .o-card__col:first-of-type {
      padding: rem(10) 0 0;
      @include mq($from: tablet) {
        padding: 0 rem(20);
      }
    }
  }
  .o-package__col:last-of-type .o-card {
    .o-card__dek,
    .o-card__col:nth-of-type(n+2) {
      display: none;
    }
  }
  .o-card {
    border-color: rgba($color-white, .4);
    border-width: 0 0 1px;
    border-style: solid;
    padding: rem(10) 0;
    margin: 0;
    flex: 100%;
  }

  @include mq($from: tablet) {
    @include flex-display($flow: row wrap, $wrap: "");
    justify-content: space-between;

    .o-package__label {
      flex: 100%;
    }

    .o-card {
      border-width: 0;
      flex-basis: calc(50% - #{rem(21)});
      margin-right: rem(10);
      padding-right: 0;
      &:nth-of-type(even) {
        border-width: 0 1px 0 0;
        padding-right: rem(10);
      }
      &:last-of-type {
        margin-right: 0;
      }
    }
    .o-package__col:first-of-type .o-card:first-of-type {
      flex: 100%;
      padding-bottom: rem(10);
      border-width: 0 0 1px;
      margin-right: 0;
      margin-bottom: 0;
      .o-card__col:first-of-type {
        padding-top: 0;
      }
    }
  }

  @include mq($from: tabletMedium) {
    .o-package__col:first-of-type .o-card:first-of-type {
      .o-card__hed {
        @include font38b;
      }

      .o-card__dek {
        @include font24r;
      }
    }
  }

  .o-package__col {
    flex: 100%;
    &:last-of-type {
      .o-card:last-of-type {
        border-width: 0;
      }
    }
    @include mq($from: tablet) {
      &:last-of-type {
        @include flex-display;
        .o-card {
          // Two-column card layout
          flex-basis: calc(50% - #{rem(30)});
          position: relative;
          border-width: 0 0 1px;
          margin-right: 0;

          &:nth-of-type(even) {
            padding-left: rem(10);
          }
          // Floating border
          &:nth-of-type(odd)::after {
            content: "";
            position: absolute;
            right: 0;
            z-index: 1;
            top: 10%;
            width: 1px;
            height: 80%;
            background: rgba($color-white, .4);
          }
          &:nth-last-of-type(2) {
            // Second-last item is odd, so it's in the left-hand column, in the bottom row
            // +---+---+
            // |   |   |
            // +---+---+
            // | x |   |
            // +---+---+
            &:nth-of-type(odd) {
              border-width: 0;
            }
            // Second-last item is even, so it's in the right-hand column, but not in the bottom row
            // +---+---+
            // |   | x |
            // +---+---+
            // |       |
            // +---+---+
            &:nth-of-type(even) {
              &::after {
                width: 0;
              }
            }
          }
          &:last-of-type {
            border-width: 0;
            &::after {
              width: 0;
            }
            // Last item is odd, so it spans 2 columns, in the bottom row
            // +---+---+
            // |   |   |
            // +---+---+
            // |   x   |
            // +---+---+
            // &:nth-of-type(odd) {}
            //
            // Last item is even, so it's in the right-hand column, in the bottom row
            // +---+---+
            // |   |   |
            // +---+---+
            // |   | x |
            // +---+---+
            // &:nth-of-type(even) {}
          }
        }
      }
    }
    @include mq($from: desktop) {
      flex: 1;
      &:first-of-type {
        border-right: 1px solid rgba($color-white, .4);
        flex: 3;
      }
      &:last-of-type {
        display: block;
        .o-card {
          border-width: 0 0 1px;
          padding: rem(10) 0 rem(10) rem(10);
          margin-right: 0;
          &:nth-of-type(odd)::after {
            width: 0;
          }
          &:nth-last-of-type(2):nth-of-type(odd) {
            border-width: 0 0 1px;
          }
        }
      }
      &:first-of-type .o-card:first-of-type {
        border-width: 0;
        .o-card__hed {
          @include font38b;
        }
        .o-card__dek {
          @include font24r;
        }
        @include col-order(2, 1);
      }
    }
  }

  // TODO: modify this package to look good with a light background. The text
  // and borders will need to be dark instead of white. Discuss with UX.
  &.o-package--single-topic--inverted-stone200 {
    background-color: $color-stone-200;
  }
  &.o-package--single-topic--inverted-stone999 {
    background-color: $color-stone-999;
  }
  &.o-package--single-topic--inverted-grey800 {
    background-color: $color-grey-800;
  }
  &.o-package--single-topic--inverted-red500 {
    background-color: $color-red-500;
  }
  &.o-package--single-topic--inverted-red900 {
    background-color: $color-red-900;
  }
  &.o-package--single-topic--inverted-salmon900 {
    background-color: $color-salmon-900;
  }
  &.o-package--single-topic--inverted-merlot900 {
    background-color: $color-merlot-900;
  }
  &.o-package--single-topic--inverted-gold900 {
    background-color: $color-gold-900;
  }
  &.o-package--single-topic--inverted-rust900 {
    background-color: $color-rust-900;
  }
  &.o-package--single-topic--inverted-olive900 {
    background-color: $color-olive-900;
  }
  &.o-package--single-topic--inverted-teal900 {
    background-color: $color-teal-900;
  }
}
