@import "../settings.colors";

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

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

@mixin o-package-single-topic-display-sm {
  .o-package--single-topic .u-wrapper {
    flex-basis: calc(50% - #{rem(22)});
  }
}

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

// ------------------------------------
// Inverted
// ------------------------------------
@mixin o-package-single-topic-inverted-sm {
  .o-package--single-topic--inverted .o-package__col:last-of-type {
    .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)::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) {}
      }
      .o-card {
        border-width: 0;
        &::after {
          width: 0;
        }
      }
    }
  }
}

@mixin o-package-single-topic-inverted-lg {
  .o-package--single-topic--inverted .o-package__col {
    &:first-of-type {
      .u-wrapper {
        border-width: 0;
      }
    }
    &:last-of-type {
      .u-wrapper {
        border-width: 0 0 1px;
        padding: .625rem 0 .625rem .625rem;
        margin-right: 0;
        &:nth-of-type(even) {
          padding-right: 0;
        }
        &:nth-of-type(odd)::after {
          width: 0;
        }
        &:nth-last-of-type(2):nth-of-type(odd) {
          border-width: 0 0 1px;
        }
        .o-card {
          padding: 0;
        }
      }
    }
  }
}
