$ds-width: 936px;

.discovery-stream.ds-layout {
  $columns: 12;
  --gridColumnGap: 48px;
  --gridRowGap: 24px;

  grid-template-columns: repeat($columns, 1fr);
  grid-column-gap: var(--gridColumnGap);
  grid-row-gap: var(--gridRowGap);
  margin: 0 auto;

  // @nova-cleanup(remove-conditional): Make grid default, remove conditional
  .nova-enabled & {
    display: grid;
  }

  @while $columns > 0 {
    .ds-column-#{$columns} {
      grid-column-start: auto;
      grid-column-end: span $columns;
    }

    $columns: $columns - 1;
  }

  .ds-column-grid {
    display: flex;
    flex-direction: column;
    grid-row-gap: var(--gridRowGap);

    // We want to completely hide components with no content,
    // otherwise, it creates grid-row-gap gaps around nothing.
    > div:empty {
      display: none;
    }
  }
}

.ds-header {
  margin: var(--space-small) 0;

  .ds-context {
    font-weight: var(--font-weight);
  }
}

.ds-header,
.ds-layout .section-title span {
  color: var(--newtab-contextual-text-primary-color);
  font-size: $section-title-font-size;
  font-weight: var(--font-weight-heading);

  // Contrast fix for users who have wallpapers set
  @include wallpaper-contrast-fix;

  .icon {
    fill: var(--newtab-text-secondary-color);
  }
}

.collapsible-section.ds-layout {
  margin: auto;

  .section-top-bar .learn-more-link {
    // Contrast fix for users who have wallpapers set
    @include wallpaper-contrast-fix;

    a {
      color: var(--newtab-primary-action-background);
      font-weight: var(--font-weight-semibold);

      &:is(:focus, :hover) {
        text-decoration: none;
      }
    }
  }
}

// Nova Grid Overrides
// @nova-cleanup(remove-conditional): Remove .nova-enabled selector and display: contents wrappers
.nova-enabled .content .ds-layout:not(.discovery-stream) {
  display: contents;

  > div {
    display: contents;
  }
}

// @nova-cleanup(remove-conditional): Remove .nova-enabled selector, make default behavior
.nova-enabled .content .discovery-stream.ds-layout {
  display: contents;
  grid-column: 1 / -1;

  .ds-column {
    display: contents;
  }

  .ds-column-grid {
    display: contents;
  }

  // The wrapper div around components
  .ds-column-grid > div {
    display: contents;
  }
}

// @nova-cleanup(remove-conditional): Remove .nova-enabled selector and display: contents wrapper
.nova-enabled .content .ds-top-sites {
  display: contents;
}

// @nova-cleanup(remove-conditional): Remove .nova-enabled selector, make default behavior
.nova-enabled .content .top-sites {
  grid-column: 1 / -1;
}

// @nova-cleanup(remove-conditional): Remove .nova-enabled selector, make default behavior.
// ds-section-wrapper is the centering grid: auto-fill with 4-column tracks
// so that section headings and card grids share the same width and alignment.
.nova-enabled .content .ds-section-wrapper {
  @include nova-centering-grid(4);
}

// @nova-cleanup(remove-conditional): Remove .nova-enabled selector, make default behavior.
// ds-card-grid-container is the centering grid: auto-fill with 4-column tracks
// so that ds-header and ds-card-grid share the same width and alignment.
.nova-enabled .content .ds-card-grid-container {
  @include nova-centering-grid(4);
}