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

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";
@import "mixins/components.topic-card";

.c-topics-packages--alpha {
  .c-package {
    margin-top: rem(30);
    border-width: 0;
    background: none;
  }

  .c-package__label {
    @include display-grid;
    @include grid-template-columns(0, 1fr auto);
    @include font-pratt-bold;
    font-size: rem(22);
    line-height: line-height(22, 25);
    letter-spacing: 0;
    color: $color-grey-900;
    text-transform: none;
    border-width: 0 0 1px;
    border-color: $color-stone-500;
    margin: 0;
    padding: rem(10) 0 0;
  }

  .c-package-label__text {
    @include grid-column(1, 2);
    @include grid-align-self(end);
    color: $color-grey-900;
    text-decoration: none;
    &:hover {
      color: $color-red-700;
    }
    &:focus,
    &:active {
      color: $color-grey-500;
    }
  }

  .c-package-label__icon {
    @include grid-column(2, 3);
    position: relative;
  }

  .c-package__stories {
    padding-top: rem(10);
  }

  .c-card {
    @include display-grid;
    @include grid-template-columns(0, 1fr auto);
    @include grid-template-rows(0, auto);
    background: none;
    padding-left: 0;
    padding-right: 0;
  }

  .c-card__grid {
    @include grid-column(1, 2);
  }

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

  .c-card__label {
    margin-right: rem(15);
    margin-top: rem(10);
    margin-bottom: 0;
  }

  .c-card__meta--inline {
    display: inline-block;
    margin-top: 0;
  }

  .c-card__meta {
    margin-top: rem(8);
  }

  .c-card__media {
    width: rem(90);
  }
}


.c-topics-packages--alpha,
.c-topics-packages--latest {
  @include c-topic-card-bookmark-button;

  .c-package__more-stories {
    @include font-gm-sans-bold;
    color: $color-red-700;
    font-size: rem(12);
    line-height: 1;
    letter-spacing: rem(1);
    text-align: right;
    border-width: 1px 0 0;
    border-color: $color-stone-300;
    border-style: solid;
    padding: rem(16) 0;
    display: block;
    text-decoration: none;
    text-transform: uppercase;

    &:hover, &:focus {
      text-decoration: underline;
    }
  }

  .c-tooltip__inner {
    width: auto;
    @include font-gm-sans-bold;
    color: $color-grey-660;
    font-size: rem(12);
    line-height: 1;
    letter-spacing: rem(1);
    text-transform: uppercase;
  }
}

.c-topics-packages--latest {
  @include c-topic-card-card;
  max-width: rem(520);
  margin: 0 auto;

  .c-package {
    margin-top: rem(50);
    border-width: 0;
    background: none;
  }

  .c-package__label {
    @include font-gm-sans-bold;
    font-size: rem(12);
    line-height: 1;
    letter-spacing: rem(1);
    color: $color-grey-900;
    // text-transform: none;
    border-width: 0 0 1px;
    border-color: $color-stone-500;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .c-package__stories {
    padding-top: rem(10);
  }

  .c-card {
    background: none;
    padding-left: 0;
    padding-right: 0;
  }

  .c-card__topics {
    padding: 0 0 rem(10);
  }

  .c-card__topics__item {
    @include font-gm-sans-bold;
    color: $color-grey-800;
    font-size: rem(12);
    line-height: 1;
    letter-spacing: rem(1);
    text-transform: uppercase;
    margin-right: rem(20);
  }

  .c-card__media {
    width: rem(90);
  }

  .c-card__meta--inline {
    display: inline-block;
  }

  .c-card__label,
  .c-card__meta__authors {
    margin-right: rem(20);
  }
}
