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

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

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

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

@mixin o-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 o-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 o-package-single-section-last-wrapper-border {
  .u-wrapper {
    &:last-of-type {
      border-width: 0 1px 1px 0;
    }
  }
}

@mixin o-package-single-section-border($width, $first: null, $last: null) {
  .u-wrapper {
    border-width: $width;
    @if ($last) {
      &:last-of-type {
        border-width: $last;
      }
    }
    @if ($first) {
      &:first-of-type {
        border-width: $first;
      }
    }
  }
}

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

@mixin o-package-single-section-basic-sm {
  .o-package--single-section {
    @include o-package-single-section-2-column;
    @include o-package-single-section-last-wrapper-border;
  }
}

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

// ------------------------------------
// Display
// ------------------------------------
@mixin o-package-single-section-display-sm {
  .o-package--single-section--display {
    @include o-package-single-section-1-column;
    @include o-package-single-section-last-wrapper-border;
  }
}

// ------------------------------------
// Muted
// ------------------------------------
@mixin o-package-single-section-muted-sm {
  .o-package--single-section--muted {
    @include o-package-single-section-last-wrapper-border;
    @include o-package-single-section-flex(38.5%, even, 61%);
  }
}

@mixin o-package-single-section-muted-lg {
  .o-package--single-section--muted {
    @include o-package-single-section-last-wrapper-border;
    @include o-package-single-section-2-column;
    @include o-package-single-section-flex-basis(calc(50% - #{rem(41)}), "3n+1", calc(25% - #{rem(41)}));
  }
}

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

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

@mixin o-package-single-section-stacked-md {
  .o-package--single-section--muted--stacked {
    @include o-package-single-section-last-wrapper-border;
  }
}

// ------------------------------------
// Video
// ------------------------------------
@mixin o-package-single-section-video {
  .o-package--single-section--video {
    @include o-package-single-section-border(0, $last: 0);
    &:last-of-type {
      @include o-package-single-section-border(0);
    }
  }
}

@mixin o-package-single-section-video-sm {
  .o-package--single-section--video {
    @include o-package-single-section-border(0, $last: 0);
    @include o-package-single-section-flex-basis($wrapper: 0);
  }
}
