.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;
    }
  }
}
