@import "../settings.colors";

@import "tools.functions";
@import "tools.mixins";

@mixin c-topic-card-card {
  .c-card {
    @include display-grid;
    @include grid-template-columns(0, 1fr auto);
    @include grid-template-rows(0, auto);
  }
  .c-card__grid {
    @include grid-column(1, 2);
  }
  .c-card__bookmark-container {
    @include grid-column(2, 3);
  }
}

@mixin c-topic-card-bookmark-button {
  // Article is bookmarkable
  .c-card__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-card__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-card__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;
      }
    }
  }
}

@mixin c-topic-card-lg {
  .c-topic-card__head,
  .c-topic-card .c-card {
    padding: rem(15);
  }
  .c-topic-card .c-card__media {
    width: rem(90);
  }
}
