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

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

///////////////////////////
// Card Wrapper Styles
///////////////////////////

.c-card {
  border-width: 1px;
  border-style: solid;
  border-color:  $color-stone-200;
  padding: rem(10);
  background-color: $color-white;
  width: 100%;
}

.c-card--adv {
  background-color: $color-blue-steel;
  position: relative;
}

.c-card--transparent {
  background-color: transparent;
  border-width: none;
}

///////////////////////////
// Card content styles
///////////////////////////

.c-card__grid {
  @include display-grid;
  @include grid-template-columns(rem(10), 1fr max-content);
  @include grid-template-rows(0, auto);

  // 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 & {
    @include grid-template-columns(0, auto);
    @include grid-template-rows(rem(10), grid-repeat(2, auto));

    .c-card__content {
      @include grid-column(1, 2);
      @include grid-row(2, 3, true);
    }
    .c-card__media {
      @include grid-column(1, 2);
      @include grid-row(1, 2, true);
      width: 100%;
    }
  }
}

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

.c-card__media {
  @include grid-column(2, 3, true);
  width: rem(70);

  > .c-image {
    display: none;
  }

  .c-image-container {
    display: block;
  }
}

.c-card--opinion .c-card__media,
.c-card--column .c-card__media {
  > .c-image {
    display: block;
  }
  .c-image-container {
    display: none;
  }
}

///////////////////////////
// Card Link
///////////////////////////

.c-card__link {
  text-decoration: none;

  &:visited {
    .c-card__hed-text {
      color: $color-grey-660;
      text-decoration: underline;
    }
  }
  &:hover,
  &:focus {
    // Prevent underline from appearing below icon
    text-decoration: none;
    .c-card__hed-text {
      text-decoration: underline;
    }
  }
  &:active {
    .c-card__hed-text {
      color: $color-grey-600;
      text-decoration: underline;
    }
  }
}

///////////////////////////
// Card Labels
///////////////////////////

.c-card__label {
  @include font-gm-sans-bold;
  text-transform: uppercase;
  @include css-variables("font-size", 12);
  letter-spacing: rem(1);
  line-height: line-height(12, 12);
  background-color: $color-red-700;
  color: $color-white;
  padding: rem(4) rem(7);
  display: inline-block;
  margin-bottom: rem(10);
}

// Label colours
.c-card__label--gold900 {
  background-color: $color-gold-900;
}
.c-card__label--red500 {
  background-color: $color-red-500;
}
.c-card__label--red700 {
  background-color: $color-red-700;
}
.c-card__label--rust900 {
  background-color: $color-rust-900;
}
.c-card__label--stone999 {
  background-color: $color-stone-999;
}

.c-card__label--muted {
  @include font-gm-sans;
  background-color: transparent;
  color: $color-grey-660;
  padding: 0;

  .c-card--adv & {
    font-family: $font-sans-stack;
    font-weight: normal;
    font-size: rem(11);
  }
}

.c-card__label--muted--red500 {
  color: $color-red-500;
}

.c-card__label--muted--white {
  color: $color-white;
}

///////////////////////////
// Card Hed (Title)
///////////////////////////

.c-card__hed {
  @include font-hed(17, 20);
  letter-spacing: 0;
  color: $color-grey-900;
  margin: 0;
  .c-card--topstory-no-img &,
  .c-card--hero-story &,
  .c-card--2package-imgleft-story &,
  .c-card--3package-imgmiddle-story &,
  .c-card--3package-imgleft-story & {
    @include font-hed(19, 22);
  }
  .c-card--adv & {
    font-size: rem(15);
    line-height: line-height(15, 18);
  }
}
.c-card__hed--new {
  &::before {
    content: "";
    width: rem(10);
    height: rem(10);
    margin-right: rem(5);
    border-radius: 100%;
    background-color: $color-utility-green-200;
    display: inline-block;
  }
}
.c-card__hed-text {
  display: inline;
}
.c-card__hed-text--link {
  text-decoration: none;
  &:visited {
    color: $color-grey-660;
    text-decoration: underline;
  }
  &:hover,
  &:focus {
    text-decoration: underline;
  }
  &:active {
    color: $color-grey-500;
    text-decoration: underline;
  }
}

.c-card__video-time {
  white-space: nowrap;
  display: inline-block;
  text-decoration: none;
}
.c-card__video-duration {
  @include font-gm-sans;
  text-transform: uppercase;
  @include css-variables("font-size", 12);
  letter-spacing: rem(1);
  line-height: line-height(12, 13);
  color: $color-grey-600;
}

///////////////////////////
// Card Dek (Description)
///////////////////////////

.c-card__dek {
  @include font-pratt;
  font-size: rem(17);
  line-height: line-height(17, 20);
  letter-spacing: 0;
  color: $color-grey-900;
  display: none;
  padding-top: rem(10);
  margin: 0;
  .c-card--topstory-no-img &,
  .c-card--hero-story &,
  .c-card--2package-imgleft-story &,
  .c-card--3package-imgmiddle-story &,
  .c-card--3package-imgleft-story & {
    font-size: rem(15);
    line-height: line-height(15, 18);
    display: block;
  }
  .c-card--adv & {
    font-family: $font-sans-stack;
    font-weight: normal;
  }
}

///////////////////////////
// Card Meta (authors, timestamp, video duration, etc) and Card Actions
///////////////////////////

.c-card__meta,
.c-card__action {
  @include font-gm-sans;
  text-transform: uppercase;
  @include css-variables("font-size", 12);
  letter-spacing: rem(1);
  line-height: line-height(12, 15);
  color: $color-grey-600;
}

.c-card__action {
  @include remove-button-appearance;
  min-height: rem(34);
  margin: 0 rem(10) 0 0;
  padding: 0;
  text-decoration: underline;
  display: inline-block;
  &:visited {
    color: $color-grey-660;
  }
  &:hover,
  &:focus {
    color: $color-grey-900;
  }
  &:active {
    color: $color-grey-300;
  }
}

.c-card__meta {
  @include font-gm-sans;
  text-transform: uppercase;
  @include css-variables("font-size", 12);
  letter-spacing: rem(1);
  line-height: line-height(12, 15);
  color: $color-grey-600;
  margin-top: rem(10);
  display: block;

  .c-card__meta-authors,
  .c-timestamp {
    margin-right: rem(15);
    display: inline-block;
  }
  .c-card__meta-author,
  .c-timestamp {
    display: inline-block;
  }
  .c-card__meta-time--salmon {
    color: $color-salmon-900;
  }
  .c-card--single-md & {
    color: $color-white;
  }
}

///////////////////////////
// Dividers for compound cards (multiple cards mashed into one)
///////////////////////////

.c-card__hr {
  border: none;
  height: rem(1);
  background-color: $color-stone-200;
  margin-top: rem(10);
  margin-bottom: rem(10);
  overflow: hidden;
}

///////////////////////////
// Inverted cards
///////////////////////////

.c-card--inverted {
  border-color: $color-stone-500;
  background-color: transparent;

  // Label colours
  .c-card__label {
    background-color: $color-white;
    color: $color-grey-660;
  }
  .c-card__label--muted {
    background-color: transparent;
    color: $color-white;
  }

  // Text colours
  .c-card__hed,
  .c-card__dek,
  .c-card__video-duration,
  .c-card__author,
  .c-timestamp {
    color: $color-white;
  }
  .c-card__link {
    &:visited {
      .c-card__hed-text {
        color: $color-stone-200;
      }
    }
    &:active {
      .c-card__hed-text {
        color: $color-stone-500;
      }
    }
  }

  // Icon colours
  .c-indicator-icon__art {
    fill: $color-white;
  }
  .c-indicator-icon__art--ga {
    fill: $color-blue-200;
  }
}

// Key icon changes opacity when subscribed user, globe advisor user
// is logged in and key is on a dark background
.u-user-role--subscribed {
  .c-card--inverted {
    .c-indicator-icon__art--key {
      fill: $color-stone-300;
      opacity: 0.5;
    }
  }
}
.u-user-entitlement--advisor {
  .c-card--inverted {
    .c-indicator-icon__art--ga {
      fill: $color-blue-200;
      opacity: .6;
    }
  }
}
