@import "settings.colors";

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

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

.c-package--story-list {
  width: 100%; // Fix for IE11, when package is nested inside of a grid column
  border: none;
  background: none;
  .c-package__label,
  .u-wrapper {
    flex: 100%;
  }
  .c-card {
    border: none;
    background-color: transparent;
  }
  .c-card__hed {
    @include font-pratt;
    font-size: rem(17);
    line-height: line-height(17, 20);
  }
}

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

.c-package--story-list--basic,
.c-package--story-list--numbered {
  .c-package__label {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid $color-stone-300;
  }
  .u-wrapper {
    border-width: 0 0 1px;
  }
  .c-card {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .c-card__media {
    display: none;
  }
}

.c-package--story-list--numbered {
  counter-reset: number;
  .c-card__grid::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: 1;
    color: $color-grey-900;
    @include grid-column(1, 2);
  }

  .c-card__grid {
    @include grid-template-columns(0, auto 1fr);
  }

  .c-card__content {
    @include grid-column(2, 3);
  }

  .u-wrapper:nth-of-type(n+10) {
    .c-card__content::before {
      width: rem(46);
    }
  }
}

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

.c-package--story-list--cards {
  padding-bottom: rem(20);
  .c-package__label {
    padding: rem(10) 0 0;
  }
  .u-wrapper {
    border-width: 0;
    margin-top: rem(10);
    margin-bottom: rem(10);
  }
  .c-card {
    background: $color-white;
  }
  .c-card__hed {
    @include font-hed(17, 20);
  }

}

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

.c-package--story-list--a-stack {
  .c-package__label {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid $color-stone-300;
    margin-bottom: rem(10);
  }
  .u-wrapper {
    border-width: 0 0 1px;
    &:first-of-type {
      .c-card {
        padding-top: 0;
      }
    }
    &:last-of-type {
      border-width: 0 0 1px;
    }
  }
  .c-card {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .c-card__hed {
    @include font-hed(17, 20);
  }
}

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

.c-package--story-list--engagement {
  .c-package__label {
    padding-left: 0;
    padding-right: 0;
    font-size: rem(12);
    height: rem(34);
  }
  .u-wrapper {
    border-width: 0;
    .c-card {
      display: none;
    }
    &:first-of-type {
      .c-card {
        display: block;
      }
    }
    .c-card__media {
      width: rem(75);
    }
  }
  .c-card {
    padding: 0;
    margin-top: rem(5);
    margin-bottom: rem(15);
  }
  .c-card__hed {
    @include font-pratt;
    font-size: rem(15);
    line-height: line-height(15, 18);
  }
}
