@import "../settings.colors";

@import "tools.mixins";

// ------------------------------------
// Display
// ------------------------------------

@mixin c-package-single-topic-display-sm {
  .c-package--single-topic {
    .c-package__label {
      border-width: 0 1px 1px 0;
    }
    .u-wrapper {
      flex-basis: calc(50% - #{rem(22)});

      .c-card__hed {
        @include font-hed(19, 22);
      }
    }
    .u-wrapper:first-of-type {
      @include c-package--display-card--undo;
      .c-card {
        padding: rem(10);
      }
    }
  }
}

@mixin c-package-single-topic-display-md {
  .c-package--single-topic .u-wrapper,
  .c-package--single-topic .u-wrapper:first-of-type {
    flex-basis: calc(25% - #{rem(40)});

    @include c-package--display-card;

    .c-card__content {
      padding: rem(10) 0;
    }
  }
}

// ------------------------------------
// Inverted
// ------------------------------------
@mixin c-package-single-topic-inverted-sm {
  .c-package--single-topic--inverted {
    .c-package__col:first-of-type .u-wrapper {
      .c-card__grid {
        @include grid-template-columns(0, 1fr 1fr);
        @include grid-template-rows(0, auto);
      }
      .c-card__content {
        @include grid-column(2, 3);
        @include grid-row(1, 2);
        padding: 0 rem(20);
      }
      .c-card__hed {
        @include font-hed(28, 31);
      }
      .c-card__dek {
        @include font-hed(17, 20, normal);
      }
      .c-card__media {
        @include grid-column(1, 2);
        @include grid-row(1, 2);
      }
    }
    .c-package__col:last-of-type {
      @include flex-display;
      .u-wrapper {
        flex-basis: calc(50% - #{rem(30)});
        position: relative;
        border-width: 0 0 1px;
        margin-right: 0;

        &:nth-of-type(even) {
          padding-left: rem(10);
          padding-right: rem(10);
        }
        // Floating border
        &:nth-of-type(odd) {
          @include c-package--grid--floating-border(10, 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) {}
        }
        .c-card {
          border-width: 0;
          &::after {
            width: 0;
          }
        }
      }
    }
  }
}

@mixin c-package-single-topic-inverted-md {
  .c-package--single-topic--inverted .c-package__col:first-of-type {
    .u-wrapper {
      .c-card__hed {
        @include font-hed(38, 41);
      }
      .c-card__dek {
        @include font-hed(24, 27, normal);
      }
    }
  }
}

@mixin c-package-single-topic-inverted-lg {
  .c-package--single-topic--inverted .c-package__col {
    flex: 1;
    &:first-of-type {
      border-right: 1px solid rgba($color-white, .4);
      flex: 3;
      .u-wrapper {
        border-width: 0;
      }
      .c-card:first-of-type {
        border-width: 0;
      }
    }
    &:last-of-type {
      display: block;
      border-width: 0;
      .u-wrapper {
        border-width: 0 0 1px;
        padding: rem(10) 0 rem(10) rem(10);
        margin-right: 0;
        &:nth-of-type(odd) {
          @include c-package--grid--floating-border-remove;
        }
        &:nth-last-of-type(2):nth-of-type(odd) {
          border-width: 0 0 1px;
        }
      }
      .c-card {
        padding-top: 0;
        padding-bottom: 0;
      }
    }
  }
}
