/* stylelint-disable max-nesting-depth */

.ds-highlights {
  .section {
    .section-list {
      grid-gap: var(--gridRowGap);

      // @nova-cleanup(remove-styles): Remove, replace with nova styles.
      &:not(.nova-enabled *) {
        grid-template-columns: repeat(1, 1fr);

        @media (min-width: $break-point-medium) {
          grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: $break-point-large) {
          grid-template-columns: repeat(4, 1fr);
        }
      }

      .card-outer {
        $line-height: 20px;

        height: 175px;

        .card-host-name {
          font-size: var(--font-size-small);
          line-height: $line-height;
          padding-block-end: 0;
          margin-block-end: var(--space-xxsmall);
          text-transform: unset;
        }

        .card-title {
          font-size: var(--font-size-small);
          font-weight: var(--font-weight-heading);
          line-height: $line-height;
          max-height: $line-height;
        }

        a {
          text-decoration: none;
        }

        // Override note: The colors set here are intentionally static
        // due to transparency issues over images.
        .context-menu-button {
          background-color: var(--newtab-button-static-background);

          &:hover {
            background-color: var(--newtab-button-static-hover-background);

            &:active {
              background-color: var(--newtab-button-static-active-background);
            }
          }

          &:focus-visible {
            background-color: var(--newtab-button-static-focus-background);
          }
        }
      }
    }
  }

  .hide-for-narrow {
    display: block;
  }

  // @nova-cleanup(remove-conditional): Remove .nova-enabled wrapper, make default
  .nova-enabled & {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, var(--col-span-2));
    gap: var(--space-medium);
    justify-content: center;

    // 2-column layout
    @include at-content-cols(8) {
      grid-template-columns: repeat(4, var(--col-span-2));
    }

    // 3, and 4 column layouts.
    @include at-content-cols(12) {
      grid-template-columns: repeat(4, var(--col-span-3));
    }

    .ds-highlights-title {
      @include wallpaper-contrast-fix;

      grid-column: 1 / -1;
      font-weight: var(--font-weight-heading);
      font-size: var(--font-size-heading-large);

      @include at-content-cols(12) {
        font-size: var(--font-size-heading-xlarge);
      }

      color: var(--newtab-contextual-text-primary-color);
      margin-block: var(--space-small) 0;
    }

    .section {
      display: contents;
    }

    .section > div {
      display: contents;
    }

    .section-list {
      grid-column: 1 / -1;
      padding-block-end: var(--space-xxlarge);
      grid-template-columns: repeat(2, 1fr);

      // 2, 3, and 4 column layouts.
      @include at-content-cols(8) {
        grid-template-columns: repeat(4, 1fr);
      }
    }
  }
}