@import "settings.colors";

@import "mixins/settings.fonts";

.c-card--bookmark {
  border-width: 0;
  padding-left: 0;
  padding-right: 0;
  background-color: initial;
  .c-card__hed-text {
    @include font-pratt();
    line-height: rem(20);
    color: inherit;
  }
  .c-card__media {
    display: none;
    width: rem(100);
  }
  // Cards that are loaded initially have slightly different headline styles and display an image
  &.c-card--bookmark-primary {
    .c-card__hed-text {
      @include font-pratt-bold();
      line-height: rem(21);
    }
  }
  .c-card__hed-tooltip-container {
    display: inline-block;
    position: relative;
    .c-article__tooltip {
      right: rem(-27.5);
      top: rem(25);
      width: auto;
      transition: none;
      opacity: 1;
      background-color: $color-white;
      &::after,
      &::before {
        right: 49%;
      }
      &::after {
        border-bottom-color: $color-white;
      }
      &:hover::after {
        border-bottom-color: $color-stone-150;
      }
      &:active::after {
        border-bottom-color: $color-stone-200;
      }
      .c-button {
        width: rem(100);
        background-color: $color-white;
        &:hover {
          background-color: $color-stone-150;
        }
        &:active {
          background-color: $color-stone-200;
        }
      }
    }
  }
}
