@import "settings.colors";
@import "settings.fonts";

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

.c-package {
  border-style: solid;
  border-color: $color-stone-200;
  border-width: 1px;
  background-color: $color-white;

  .c-package__stories {
    @include flex-display;
    flex: 100%;
  }
  .u-wrapper {
    flex: 100%;
    border-style: solid;
    border-color: $color-stone-200;
    border-width: 0 0 1px;
    &:last-of-type {
      border-width: 0;
    }
  }
  .c-card {
    border-width: 0;
    height: 100%;
    &.c-card--adv {
      background-color: $color-blue-steel;
      .c-card__hed {
        font-family: $font-sans-stack;
        font-size: rem(15);
        line-height: line-height(15, 18);
        font-weight: bold;
      }
    }
  }

  &.c-package--top {
    .c-package__label {
      font-size: rem(12);
    }
    .c-card__media {
      display: none;
    }
  }


  .c-card--opinion .c-card__media,
  .c-card--column .c-card__media {
    display: block;
  }

  // The first card in each of the top package types
  .c-card--topstory-no-img,
  .c-card--hero-story,
  .c-card--2package-imgleft-story,
  .c-card--3package-imgmiddle-story,
  .c-card--3package-imgleft-story {
    padding: 0;
    .c-card__content {
      padding: 0 rem(10) rem(10);
    }
    .c-card__media {
      display: block;
    }
    // If the first card is opinion or column, show the featured image
    &.c-card--opinion .c-card__media,
    &.c-card--column .c-card__media {
      display: block;
      > .c-image {
        display: none;
      }
      .c-image-container {
        display: block;
      }
    }
  }
}


.c-package__label {
  display: block;
  @include font-gm-sans-bold;
  color: $color-grey-660;
  text-transform: uppercase;
  letter-spacing: rem(1);
  font-size: rem(14);
  line-height: 1;
  padding: rem(10);
  border-width: 0;
  border-color: $color-stone-200;
  border-style: solid;
}

.c-package__label-link {
  color: $color-grey-900;
  text-decoration: none;
  display: inline-block;
  &:hover,
  &:focus {
    text-decoration: underline;
  }
}

.c-package__label-link__icon {
  width: rem(10);
  height: rem(10);
  margin-left: rem(1.5);
  margin-top: rem(1);
  fill: $color-grey-300;
  display: inline-block;
  vertical-align: top;
}

.c-package__col {
  display: block;
  &:first-of-type {
    .u-wrapper:last-of-type {
      border-width: 0 0 1px;
    }
  }
  &:last-of-type {
    .u-wrapper:last-of-type {
      border-width: 0;
    }
  }
}

.c-package__button {
  padding: 0 rem(10) rem(10);
  display: block;
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: $color-stone-200;
}
