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

@import "settings.fonts";
@import "tools.mixins";

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

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

@mixin c-package--display-card {
  .c-card__grid {
    @include grid-template-columns(0, 1fr);
    @include grid-template-rows(0, 1fr auto);
  }
  .c-card__content {
    padding: rem(10);
    @include grid-column(1, 2);
    @include grid-row(2, 3);
  }
  .c-card__media {
    width: 100%;
    @include grid-column(1, 2);
    @include grid-row(1, 2);
  }
}

@mixin c-package--display-card--undo {
  .c-card__grid {
    @include grid-template-columns(rem(10), 1fr max-content);
    @include grid-template-rows(0, auto);
  }
  .c-card__content {
    @include grid-column(1, 2, true);
    @include grid-row(1, 2);
    padding: 0;
  }
  .c-card__media {
    @include grid-column(2, 3, true);
    @include grid-row(1, 2);
    width: rem(70);
  }
}

@mixin c-package-sm {

  .c-package__col:nth-of-type(2) {
    @include flex-display;
    flex: 100%;

    .c-package--hero & {
      .u-wrapper {
        flex: 50%;
        &:last-of-type:nth-child(odd) {
          flex: 100%;
          @include c-package--grid--floating-border-remove;
        }
      }
      .u-wrapper:nth-child(odd) {
        @include c-package--grid--floating-border;
      }
    }
  }

  // The first card in each of the top package types
  .c-package {
    .c-card--topstory-no-img,
    .c-card--hero-story,
    .c-card--2package-imgleft-story,
    .c-card--3package-imgmiddle-story,
    .c-card--3package-imgleft-story {
      padding: 0 rem(10) rem(10);
      .c-card__content {
        padding: 0;
      }
    }
    .c-card {
      &.c-card--opinion .c-card__media,
      &.c-card--column .c-card__media {
        display: block;
      }
    }
    .c-card--topstory-no-img {
      .c-card__media,
      &.c-card--opinion .c-card__media,
      &.c-card--column .c-card__media {
        display: none;
      }
    }
  }

  // All top package types except "hero" and "standard"
  .c-package--2package-imgleft-story,
  .c-package--3package-imgmiddle-story,
  .c-package--3package-imgleft-story {
    .c-package__stories {
      @include flex-display;
      .u-wrapper {
        flex: 50%;
        &:first-of-type {
          flex: 100%;
        }
        &:nth-child(even) {
          @include c-package--grid--floating-border;
        }
        &:last-of-type:nth-child(even) {
          @include c-package--grid--floating-border-remove;
        }
        &:nth-last-of-type(2):nth-child(even) {
          border-width: 0;
        }
      }
    }
  }

  // Cards should not align themselves side-by-side
  // unless they're at least this wide
  .c-package--standard .c-package__stories .u-wrapper {
    min-width: rem(280);
  }
}

@mixin c-package-lg {
  .c-package--standard {
    .c-package__stories {
      .u-wrapper:nth-child(even) {
        @include c-package--grid--floating-border-remove;
      }
    }
  }

  .c-package__stories {
    @include flex-display;
  }
  .c-package__col {
    flex: 3;
    .u-wrapper {
      border-width: 0;
    }
    &:first-of-type .u-wrapper:last-of-type {
      border-width: 0;
    }
    &:nth-of-type(2) {
      border-left: 1px solid $color-stone-200;
      flex: 1;
      .u-wrapper {
        flex-basis: 100%;
        border-width: 0 0 1px;
        &:nth-child(odd) {
          @include c-package--grid--floating-border-remove;
        }

        .c-package--hero & {
          flex: 100%;
        }
      }
    }
  }
  .c-package--hero .c-package__col:last-child .u-wrapper:first-child .c-card {
    padding-top: 0;
  }
}
