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

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

@mixin c-package--grid--floating-border($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--grid--floating-border-remove {
  &::after {
    display: none;
  }
}

@mixin c-package-sm {

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

    .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--first,
    .c-card--hero-lede,
    .c-card--g2-lede,
    .c-card--g3-centre-lede,
    .c-card--g3-left-lede {
      padding: 0 rem(10) rem(10);
      .c-card__content {
        padding: 0;
      }
    }
  }

  // All top package types except "hero"
  .c-package--standard,
  .c-package--g2-lede,
  .c-package--g3-centre-lede,
  .c-package--g3-left-lede {
    .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__stories {
    @include flex-display;
  }
  .c-package__col {
    flex: 3;
    .u-wrapper {
      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;
  }
}
