@import "settings.colors";

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

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

.o-package--story-list {
  width: 100%; // Fix for IE11, when package is nested inside of a grid column
  border: none;
  .o-package__label,
  .u-wrapper {
    flex: 100%;
  }
  .o-card {
    border: none;
  }
}

// ------------------------------------
// Basic and Numbered
// ------------------------------------

.o-package--story-list--basic,
.o-package--story-list--numbered {
  .o-package__label.o-package__label--transparent {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid $color-stone-300;
  }
  .u-wrapper {
    border-width: 0 0 1px;
    border-style: solid;
    border-color: $color-stone-200;
  }
  .o-card {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .o-card__col:nth-of-type(even) {
    display: none;
  }
}

.o-package--story-list--numbered {
  counter-reset: number;
  .o-card__content::before {
    counter-increment: number;
    content: counter(number);
    @include font-pratt;
    width: rem(30);
    padding-left: rem(10);
    margin-right: rem(20);
    font-size: rem(38);
    line-height: line-height(38, 38);
    color: $color-grey-900;
  }
  .u-wrapper:nth-of-type(n+10) {
    .o-card__content::before {
      width: rem(46);
    }
  }
  // TODO: Create an "o-package--story-list--more-than-9-items" class,
  // then do something like this to make the numbers line up when the
  // items are in 2 or 4 columns:
  //
  // @include mq($from: tablet) { // 2-columns at this breakpoint
  //   .o-package--story-list--more-than-9-items {
  //     .o-card__content::before {
  //       width: rem(46); // All numbers become as wide as 10+
  //     }
  //   }
  // }
}

// ------------------------------------
// Cards
// ------------------------------------

.o-package--story-list--cards {
  padding-bottom: rem(20);
  .o-package__label {
    padding-left: 0;
    padding-bottom: 0;
  }
  .u-wrapper {
    display: flex;
  }
  .o-card {
    flex: 100%;
  }
  .o-card__label {
    margin-bottom: rem(5);
  }
  .o-card__meta {
    margin-top: rem(5);
  }
}

// ------------------------------------
// A-Stack
// ------------------------------------

.o-package--story-list--a-stack {
  .o-package__label.o-package__label--transparent {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid $color-stone-300;
    margin-bottom: rem(10);
  }
  .u-wrapper {
    border-width: 0 0 1px;
    border-style: solid;
    border-color: $color-stone-200;
    &:first-of-type {
      .o-card {
        padding-top: 0;
      }
    }
  }
  .o-card {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

// ------------------------------------
// Engagement
// ------------------------------------

.o-package--story-list--engagement {
  .o-package__label {
    padding-left: 0;
    padding-right: 0;
    font-size: rem(12);
    height: rem(34);
  }
  .u-wrapper {
    .o-card {
      display: none;
      .o-card__content {
        .o-card__col:nth-of-type(2) {
          flex: 0 0 rem(75);
        }
      }
    }
    &:first-of-type {
      .o-card {
        display: block;
      }
    }
  }
  .o-card {
    padding: 0;
    margin-top: rem(5);
    margin-bottom: rem(15);
  }
}
