text: .card-outer {
    @include context-menu-button;
    background: var(--newtab-card-background-color);
    border-radius: $border-radius;
    display: inline-block;
    height: $card-height;
    margin-inline-end: $base-gutter;
    position: relative;
    width: 100%;
  
    &.placeholder {
      background: transparent;
  
      .card {
        box-shadow: inset $inner-box-shadow;
      }
  
      .card-preview-image-outer,
      .card-context {
        display: none;
      }
    }
  
    .card {
      border-radius: $border-radius;
      box-shadow: var(--newtab-card-shadow);
      height: 100%;
    }
  
    > a {
      color: inherit;
      display: block;
      height: 100%;
      outline: none;
      position: absolute;
      width: 100%;
  
      &:-moz-any(.active, :focus) {
        .card {
          @include fade-in-card;
        }
  
        .card-title {
          color: var(--newtab-link-primary-color);
        }
      }
    }
  
    &:-moz-any(:hover, :focus, .active):not(.placeholder) {
      @include fade-in-card;
      @include context-menu-button-hover;
      outline: none;
  
      .card-title {
        color: var(--newtab-link-primary-color);
      }
  
      .alternate ~ .card-host-name {
        display: none;
      }
  
      .card-host-name.alternate {
        display: block;
      }
    }
  
    .card-preview-image-outer {
      background-color: $grey-30;
      border-radius: $border-radius $border-radius 0 0;
      height: $card-preview-image-height;
      overflow: hidden;
      position: relative;
  
      [lwt-newtab-brighttext] & {
        background-color: $grey-60;
      }
  
      &::after {
        border-bottom: 1px solid var(--newtab-card-hairline-color);
        bottom: 0;
        content: '';
        position: absolute;
        width: 100%;
      }
  
      .card-preview-image {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        opacity: 0;
        transition: opacity 1s $photon-easing;
        width: 100%;
  
        &.loaded {
          opacity: 1;
        }
      }
    }
  
    .card-details {
      padding: 15px 16px 12px;
    }
  
    .card-text {
      max-height: 4 * $card-text-line-height + $card-title-margin;
      overflow: hidden;
  
      &.no-host-name,
      &.no-context {
        max-height: 5 * $card-text-line-height + $card-title-margin;
      }
  
      &.no-host-name.no-context {
        max-height: 6 * $card-text-line-height + $card-title-margin;
      }
  
      &:not(.no-description) .card-title {
        max-height: 3 * $card-text-line-height;
        overflow: hidden;
      }
    }
  
    .card-host-name {
      color: var(--newtab-text-secondary-color);
      font-size: 10px;
      overflow: hidden;
      padding-bottom: 4px;
      text-overflow: ellipsis;
      text-transform: uppercase; // sass-lint:disable-line no-disallowed-properties
      white-space: nowrap;
    }
  
    .card-host-name.alternate { display: none; }
  
    .card-title {
      font-size: 14px;
      font-weight: 600;
      line-height: $card-text-line-height;
      margin: 0 0 $card-title-margin;
      word-wrap: break-word;
    }
  
    .card-description {
      font-size: 12px;
      line-height: $card-text-line-height;
      margin: 0;
      overflow: hidden;
      word-wrap: break-word;
    }
  
    .card-context {
      bottom: 0;
      color: var(--newtab-text-secondary-color);
      display: flex;
      font-size: 11px;
      inset-inline-start: 0;
      padding: 9px 16px 9px 14px;
      position: absolute;
    }
  
    .card-context-icon {
      fill: var(--newtab-text-secondary-color);
      height: 22px;
      margin-inline-end: 6px;
    }
  
    .card-context-label {
      flex-grow: 1;
      line-height: 22px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  
  .normal-cards {
    .card-outer {
      // Wide layout styles
      @media (min-width: $break-point-widest) {
        $line-height: 23px;
        height: $card-height-large;
  
        .card-preview-image-outer {
          height: $card-preview-image-height-large;
        }
  
        .card-details {
          padding: 13px 16px 12px;
        }
  
        .card-text {
          max-height: 6 * $line-height + $card-title-margin;
        }
  
        .card-host-name {
          font-size: 12px;
          padding-bottom: 5px;
        }
  
        .card-title {
          font-size: 17px;
          line-height: $line-height;
          margin-bottom: 0;
        }
  
        .card-text:not(.no-description) {
          .card-title {
            max-height: 3 * $line-height;
          }
        }
  
        .card-description {
          font-size: 15px;
          line-height: $line-height;
        }
  
        .card-context {
          bottom: 4px;
          font-size: 14px;
        }
      }
    }
  }
  
  .compact-cards {
    $card-detail-vertical-spacing: 12px;
    $card-title-font-size: 12px;
  
    .card-outer {
      height: $card-height-compact;
  
      .card-preview-image-outer {
        height: $card-preview-image-height-compact;
      }
  
      .card-details {
        padding: $card-detail-vertical-spacing 16px;
      }
  
      .card-host-name {
        line-height: 10px;
      }
  
      .card-text {
        .card-title,
        &:not(.no-description) .card-title {
          font-size: $card-title-font-size;
          line-height: $card-title-font-size + 1;
          max-height: $card-title-font-size + 5;
          overflow: hidden;
          padding: 0 0 4px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
  
      .card-description {
        display: none;
      }
  
      .card-context {
        $icon-size: 16px;
        $container-size: 32px;
        background-color: var(--newtab-card-background-color);
        border-radius: $container-size / 2;
        clip-path: inset(-1px -1px $container-size - ($card-height-compact - $card-preview-image-height-compact - 2 * $card-detail-vertical-spacing));
        height: $container-size;
        width: $container-size;
        padding: ($container-size - $icon-size) / 2;
        top: $card-preview-image-height-compact - $icon-size;
        inset-inline-end: 12px;
        inset-inline-start: auto;
  
        &::after {
          border: 1px solid var(--newtab-card-hairline-color);
          border-bottom: 0;
          border-radius: ($container-size / 2) + 1 ($container-size / 2) + 1 0 0;
          content: '';
          position: absolute;
          height: ($container-size + 2) / 2;
          width: $container-size + 2;
          top: -1px;
          left: -1px;
        }
  
        .card-context-icon {
          margin-inline-end: 0;
          height: $icon-size;
          width: $icon-size;
  
          &.icon-bookmark-added {
            fill: $bookmark-icon-fill;
          }
  
          &.icon-download {
            fill: $download-icon-fill;
          }
  
          &.icon-pocket {
            fill: $pocket-icon-fill;
          }
        }
  
        .card-context-label {
          display: none;
        }
      }
    }
  
    @media not all and (min-width: $break-point-widest) {
      .hide-for-narrow {
        display: none;
      }
    }
  }
  