@import "tools.mixins";

// ------------------------------------
// Shared
// ------------------------------------

@mixin c-package-single-section-1-column {
  .u-wrapper {
    flex: 100%;
  }
}

@mixin c-package-single-section-2-column {
  .u-wrapper {
    flex-basis: calc(50% - #{rem(21)});
  }
}

@mixin c-package-single-section-flex($value: null, $nth: null, $wrapper: null) {
  .u-wrapper {
    @if ($wrapper) {
      flex: $wrapper;
    }
    @if ($nth) {
      &:nth-of-type(#{$nth}) {
        flex: $value;
      }
    }
  }
}

@mixin c-package-single-section-flex-basis($value: null, $nth: null, $wrapper: null) {
  .u-wrapper {
    @if ($wrapper) {
      flex-basis: $wrapper;
    }
    @if ($nth) {
      &:nth-of-type(#{$nth}) {
        flex-basis: $value;
      }
    }
  }
}

@mixin c-package-single-section-last-wrapper-border {
  .u-wrapper {
    &:last-of-type {
      border-width: 0 1px 1px 0;
    }
  }
}

// ------------------------------------
// Basic
// ------------------------------------

@mixin c-package-single-section-basic-sm {
  .c-package--single-section {
    // border-width: 1px 0 0 1px;
    .u-wrapper {
      border-width: 0 1px 1px 0;
    }
    @include c-package-single-section-2-column;
    @include c-package-single-section-last-wrapper-border;
    .c-package__button {
      display: none;
    }
  }
}

@mixin c-package-single-section-basic-md {
  .c-package--single-section {
    @include c-package-single-section-1-column;
  }
}

// ------------------------------------
// Display
// ------------------------------------
@mixin c-package-single-section-display-sm {
  .c-package--single-section--display {
    @include c-package-single-section-1-column;
    .u-wrapper {
      &:last-of-type {
        border-width: 0 1px 0 0;
      }
    }
    .c-card__media {
      width: rem(100);
    }
    .c-package__button {
      display: block;
    }
  }
}

@mixin c-package-single-section-display-md {
  .c-package--single-section--display {
    @include c-package-single-section-last-wrapper-border;
    .c-package__button {
      display: none;
    }
  }
}

@mixin c-package-single-section-display-lg {
  .c-package--single-section--display {
    .u-wrapper:first-of-type {
      @include c-package--display-card;
      .c-card {
        padding: 0;
      }
    }
  }
}

// ------------------------------------
// Muted
// ------------------------------------
@mixin c-package-single-section-muted-sm {
  .c-package--single-section--muted {
    @include c-package-single-section-last-wrapper-border;
    @include c-package-single-section-flex(38.5%, even, 61%);
    .u-wrapper:first-of-type {
      .c-card__hed {
        @include font-hed(24, 27);
      }
    }
  }
}

@mixin c-package-single-section-muted-lg {
  .c-package--single-section--muted {
    @include c-package-single-section-last-wrapper-border;
    @include c-package-single-section-2-column;
    @include c-package-single-section-flex-basis(calc(50% - #{rem(41)}), "3n+1", calc(25% - #{rem(41)}));
    .u-wrapper:first-of-type {
      .c-card__hed {
        @include font-hed(24, 27);
      }
    }
  }
}

// ------------------------------------
// Stacked
// ------------------------------------

@mixin c-package-single-section-stacked-sm {
  .c-package--single-section--stacked {
    @include c-package-single-section-1-column;
    .u-wrapper {
      &:last-of-type {
        border-width: 0 1px 0 0;
      }
    }
    .c-package__button {
      display: block;
    }
  }
}

@mixin c-package-single-section-stacked-md {
  .c-package--single-section--stacked {
    @include c-package-single-section-last-wrapper-border;
    .c-package__button {
      display: none;
    }
  }
}

// ------------------------------------
// Video
// ------------------------------------
@mixin c-package-single-section-video-sm {
  .c-package--single-section--video {
    @include c-package-single-section-flex-basis($wrapper: 0);

    .c-package__col {
      &:first-of-type {
        flex-grow: 0;
        flex-basis: 80%;
        margin: auto;
        .c-card__hed {
          @include font-hed(24, 27);
        }
      }
      &:last-of-type {
        @include flex-display;
        .c-card {
          flex-basis: 0;
        }
      }
    }

    .u-wrapper {
      border-width: 0;
    }
    .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-single-section-video-md {
  .c-package--single-section--video {
    @include c-package-single-section-flex-basis($wrapper: 0);

    .c-package__col {
      flex: 1;
      &:first-of-type {
        flex: 1;
        align-self: flex-start;
        margin: inherit;
        .c-card {
          padding: rem(10);
        }
      }
      &:last-of-type {
        display: flex;
        align-self: flex-start;
        flex: 1.5;
        .u-wrapper {
          flex-basis: 50%;
        }
        .c-card__grid {
          @include grid-template-columns(0, auto 1fr);
          @include grid-template-rows(0, 1fr);
        }
        .c-card__content {
          padding: rem(10);
          @include grid-column(2, 3);
          @include grid-row(1, 2);
        }
        .c-card__hed {
          @include font-hed(17, 20, normal);
        }
        .c-card__media {
          width: rem(120);
          @include grid-column(1, 2);
          @include grid-row(1, 2);
        }
      }
    }

    .u-wrapper {
      border-width: 0;
    }
  }
}

@mixin c-package-single-section-video-lg {
  .c-package--single-section--video {
    .c-package__col:last-of-type {
      border-width: 0;
      .c-card__media {
        width: rem(160);
      }
      .u-wrapper {
        border-width: 0;
      }
    }
  }
}
