// Type sizes
$header-font-size: 17;
$header-line-height: 24;
$excerpt-font-size: 14;
$excerpt-line-height: 20;
$ds-card-image-gradient-fade: rgba(0, 0, 0, 0%);
$ds-card-image-gradient-solid: rgba(0, 0, 0, 100%);

.ds-card {
  display: flex;
  flex-direction: column;
  position: relative;

  &.placeholder {
    background: transparent;
    box-shadow: inset $inner-box-shadow;
    border-radius: 4px;
    min-height: 300px;
  }

  .img-wrapper {
    width: 100%;
    position: relative;
  }

  .card-stp-button-hover-background {
    opacity: 0;
    width: 100%;
    position: absolute;
    top: 0;
    height: 0;
    transition: opacity;
    transition-duration: 0s;
    padding-top: 50%;
    pointer-events: none;
    background: $black-40;
    border-radius: 8px 8px 0 0;

    .card-stp-button-position-wrapper {
      position: absolute;
      inset-inline-end: 10px;
      top: 10px;
      display: flex;
      justify-content: end;
      align-items: center;
    }

    .icon-pocket-save,
    .icon-pocket {
      margin-inline-end: 4px;
      height: 15px;
      width: 15px;
      background-size: 15px;
      fill: $white;
    }

    .context-menu-button {
      position: static;
      transition: none;
      border-radius: 3px;
    }

    .context-menu-position-container {
      position: relative;
    }

    .context-menu {
      margin-inline-start: 18.5px;
      inset-inline-start: auto;
      position: absolute;
      top: 20.25px;
    }

    .card-stp-button {
      display: flex;
      margin-inline-end: 7px;
      font-weight: 400;
      font-size: 13px;
      line-height: 16px;
      background-color: $pocket-icon-fill;
      border: 0;
      border-radius: 4px;
      padding: 6px;
      white-space: nowrap;
      color: $white;
    }

    button,
    .context-menu {
      pointer-events: auto;
    }

    button {
      cursor: pointer;
    }
  }

  &.last-item {
    .card-stp-button-hover-background {
      .context-menu {
        margin-inline-start: auto;
        margin-inline-end: 18.5px;
      }
    }
  }

  // The active class is added when the context menu is open.
  &.active,
  &:focus-within,
  &:hover {
    .card-stp-button-hover-background {
      display: block;
      opacity: 1;
      transition-duration: 0.3s;

      .context-menu-button {
        opacity: 1;
        transform: scale(1);
      }
    }
  }

  .img {
    height: 0;
    padding-top: 50%; // 2:1 aspect ratio

    img {
      border-radius: 4px;
      box-shadow: $shadow-image-inset;
    }
  }

  .ds-card-link {
    height: 100%;
    display: flex;
    flex-direction: column;
    text-decoration: none;

    &:hover {
      header {
        color: var(--newtab-primary-action-background);
      }
    }

    &:focus {
      @include ds-focus;

      transition: none;

      header {
        color: var(--newtab-primary-action-background);
      }
    }

    &:active {
      header {
        color: var(--newtab-primary-element-active-color);
      }
    }
  }

  .meta {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    flex-grow: 1;

    .info-wrap {
      flex-grow: 1;
    }

    .title {
      // show only 3 lines of copy
      @include limit-visible-lines(3, $header-line-height, $header-font-size);

      font-weight: 600;
    }

    .excerpt {
      // show only 3 lines of copy
      @include limit-visible-lines(
        3,
        $excerpt-line-height,
        $excerpt-font-size
      );
    }

    .source {
      -webkit-line-clamp: 1;
      margin-bottom: 2px;
      font-size: 13px;
      color: var(--newtab-text-secondary-color);

      span {
        display: inline-block;
      }
    }

    .new-sponsored-label {
      font-size: 13px;
      margin-bottom: 2px;
    }
  }

  &.ds-card-title-lines-2 .meta .title {
    // show only 2 lines of copy
    @include limit-visible-lines(2, $header-line-height, $header-font-size);
  }

  &.ds-card-title-lines-1 .meta .title {
    // show only 1 line of copy
    @include limit-visible-lines(1, $header-line-height, $header-font-size);
  }

  &.ds-card-desc-lines-2 .meta .excerpt {
    // show only 2 lines of copy
    @include limit-visible-lines(2, $excerpt-line-height, $excerpt-font-size);
  }

  &.ds-card-desc-lines-1 .meta .excerpt {
    // show only 1 line of copy
    @include limit-visible-lines(1, $excerpt-line-height, $excerpt-font-size);
  }

  &.ds-card-compact-image .img {
    padding-top: 47%;
  }

  &.ds-card-image-gradient {
    img {
      mask-image: linear-gradient(to top, $ds-card-image-gradient-fade, $ds-card-image-gradient-solid 40px);
    }

    .meta {
      padding: 3px 15px 11px;
    }
  }

  header {
    line-height: $header-line-height * 1px;
    font-size: $header-font-size * 1px;
    color: var(--newtab-text-primary-color);
  }

  p {
    font-size: $excerpt-font-size * 1px;
    line-height: $excerpt-line-height * 1px;
    color: var(--newtab-text-primary-color);
    margin: 0;
  }
}