@import "settings.colors";

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

.c-related-articles {
  margin-top: rem(26);
  margin-bottom: rem(26);
  padding: rem(10) rem(10) 0 rem(10);
  border: 1px solid $color-stone-200;
  background-color: $color-white;

  .c-card {
    @include display-grid;

    // Two columns: one containing the clickable headline and image, which is in its own grid,
    // the other containing the bookmark icon.
    @include grid-template-columns(0, 1fr auto);

    @include grid-template-rows(0, auto);

    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-color: $color-stone-150;
    &:first-child {
      border-color: $color-stone-200;
    }
  }
  .c-card__content-number {
    @include font-gm-sans-bold;
    color: $color-red-900;
    @include css-variables("font-size", 12);
    line-height: 1;
    letter-spacing: rem(1);
    margin-left: rem(4);
    display: inline-block;
    vertical-align: middle;
  }

  .c-label--card {
    .c-label--card__content {
      margin-bottom: rem(6);
    }
  }

  // Column one of the outer grid, containing the headline and thumbnail.
  .c-card__grid {
    @include grid-column(1, 2);
  }

  // Column two of the outer grid, containing the bookmark.
  .c-related-articles__bookmark-container {
    @include grid-column(2, 3);
    margin-left: rem(5);
    margin-top: rem(-10);
    margin-right: rem(-10);
    position: relative;
  }

  .c-button[disabled], .c-button:disabled {
    pointer-events: none;
  }
}

.c-related-articles--stone {
  background-color: $color-stone-100;

  .c-card {
    background-color: transparent;
  }
}

.c-related-articles__heading {
  @include font-gm-sans-bold;
  margin-top: 0;
  margin-bottom: rem(10);
  text-transform: uppercase;
  @include css-variables("font-size", 12);
  letter-spacing: rem(1);
}

.c-related-articles--thumbnail {
  .c-card .c-card__content-text {
    @include font-pratt-bold;
  }

  .c-card__content-price {
    @include font-gm-sans;
    padding-top: rem(15);
    text-transform: uppercase;
    @include css-variables("font-size", 12);
    letter-spacing: rem(1);
    color: $color-grey-900;

    .c-card__content-price-asking + .c-card__content-price-selling {
      display: block;
      padding-top: rem(5);
    }
  }
}

// Article is bookmarkable.
.c-related-articles__bookmark {
  &,
  &:visited,
  &:hover,
  &:focus,
  &:active {
    .c-button__icon {
      fill: transparent;
      stroke: $color-grey-660;
    }
    .c-button__icon__use {
      fill: $color-grey-660;
      stroke: $color-grey-660;
      color: transparent;
    }
  }
}

// Article is not bookmarkable.
.c-related-articles__bookmark--inactive {
  &,
  &:visited,
  &:hover,
  &:focus,
  &:active {
    .c-button__icon {
      fill: transparent;
      stroke: $color-grey-300;
    }
    .c-button__icon__use {
      fill: $color-grey-300;
      stroke: $color-grey-300;
      color: transparent;
    }
  }
}

// Article is bookmarked
.c-related-articles__bookmark--active {
  &,
  &:visited,
  &:hover,
  &:focus,
  &:active {
    .c-button__icon {
      fill: $color-grey-660;
      stroke: $color-grey-660;
    }
    .c-button__icon__use {
      fill: $color-grey-660;
      stroke: $color-grey-660;
      color: $color-grey-660;
    }
  }
}

