@import "settings.breakpoints";
@import "settings.colors";

@import "mixins/components.label";
@import "mixins/objects.card";
@import "mixins/objects.homepage-cards";
@import "mixins/tools.mixins";

///////////////////////////
// Section Package Styles
///////////////////////////
.o-package, .o-package__label, .o-package__button {
  border-style: solid;
  border-color: $color-stone-200;
  border-width: 1px 0 0 1px;
}

.o-package--transparent {
  border: none;
}

.o-package__stories {
  @include flex-display;
  flex: 100%;
}

.o-package__label {
  @include c-label-section-feed;
  display: block;
  padding: rem(10);
  border-width: 0 1px 0 0;
  .o-package__label-link {
    color: $color-grey-900;
    text-decoration: none;
    display: block;
    &:hover, &:focus {
      text-decoration: underline;
    }
  }
  &.o-package__label--transparent {
    background-color: transparent;
    border: none;
  }
}

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

.o-package__label--transparent--dark-bg {
  color: $color-white;
  .o-package__label-link {
    color: $color-white;
  }
  .o-package__label-link__icon {
    fill: $color-white;
  }
}

.o-package__button {
  padding: 0 rem(10) rem(10);
  display: block;
  border-width: 0 1px 1px 0;
}

///////////////////////////
// Single Section Packages
///////////////////////////
.o-package--single-section {
  background-color: $color-white;

  .o-package__label {
    border-width: 0 1px 1px 0;
  }
  .o-card {
    margin-bottom: 0;
    margin-top: 0;
    border-width:  0 1px 1px 0;
    border-style: solid;
    border-color: $color-stone-200;
    flex: 100%;

    &:last-of-type {
      border-width: 0 1px 0 0;
    }

    @include mq($from: tablet, $until: tabletMedium) {
      flex-basis: calc(50% - #{rem(21)});
    }
    @include mq($from: tablet) {
      &:last-of-type {
        border-width: 0 1px 1px 0;
      }
    }
    @include mq($from: tabletMedium) {
      flex: 100%;
    }
  }

  @include mq($from: tablet) {
    @include flex-display($flow: row wrap, $wrap: "");
    justify-content: space-between;

    .o-package__label {
      flex: 100%;
    }

    .o-package__button {
      display: none;
    }
  }
}

.o-package--single-section--muted {
  .o-package__stories > .o-card {
    &:first-of-type {
      .o-card__hed {
        @include font19b;
      }
    }
    &:nth-of-type(n+2) {
      .o-card__label {
        @include o-card-label--muted;
      }
    }
  }

  @include mq($from: tablet) {
    .o-package__stories > .o-card:first-of-type {
      .o-card__hed {
        @include font24b;
      }
    }
  }

  @include mq($from: tablet, $until: desktop) {
    .o-card {
      flex-basis: calc(50% - #{rem(10)});
      &:nth-of-type(even) {
        flex: 3;
      }
    }
  }

  @include mq($from: desktop) {
    .o-card {
      flex-basis: calc(25% - #{rem(41)});
      &:nth-of-type(even) {
        flex-basis: calc(25% - #{rem(41)});
      }
      &:nth-of-type(3n+1) {
        flex-basis: calc(50% - #{rem(41)});
      }
    }
  }
}

.o-package--single-section--muted--stacked {
  .o-card, .o-package__button {
    flex: 100%;
  }
  @include mq($from: tablet) {
    .o-card__col:first-of-type {
      flex: 2;
    }
    .o-card:last-of-type {
      border-width: 0 1px 0 0;
    }
    .o-package__button {
      display: block;
    }
  }
  @include mq($from: tabletMedium) {
    .o-card:last-of-type {
      border-width: 0 1px 1px 0;
      border-style: solid;
      border-color: $color-stone-200;
    }
    .o-package__button {
      display: none;
    }
  }
}

.o-package--single-section--display {
  @include mq($from: desktop) {
    .o-card:first-of-type {
      padding: 0;
      .o-card__content {
        flex-wrap: wrap;
      }
      .o-card__col {
        flex: 100%;
        order: 1;
        &:first-of-type {
          order: 2;
          padding: rem(10);
        }
      }
    }
  }
}
