sousa-gecko/browser/extensions/newtab/content-src/components/Base/_Base.scss

.outer-wrapper {
  color: var(--newtab-text-primary-color);
  display: flex;
  flex-grow: 1;
  min-height: 100vh;
  padding: var(--space-xxlarge);

  &.ds-outer-wrapper-breakpoint-override {
    padding: var(--space-xxlarge) 0;

    @media(min-width: $break-point-medium) {
      padding: var(--space-xxlarge);
    }
  }

  &.only-search {
    display: block;
    // Bug 1967304 - Large number (128px)
    padding-block-start: calc(var(--space-xxlarge) * 4);
  }

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

main.newtab-main {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: $wrapper-default-width;
  padding: 0;
  min-width: min-content;

  .vertical-center-wrapper {
    margin: auto 0;
  }

  section {
    margin-block-end: var(--space-medium);
    position: relative;
  }

  .hide-main & {
    visibility: hidden;
  }

  @media (min-width: $break-point-medium) {
    width: $wrapper-max-width-medium;
  }

  @media (min-width: $break-point-large) {
    width: $wrapper-max-width-large;
  }

  @media (min-width: $break-point-widest) {
    width: $wrapper-max-width-widest;
  }
}

// Edge case for if search is turned off (compact layout)
.no-search main.newtab-main {
  margin-block-start: var(--space-xxlarge);
}

.ds-outer-wrapper-search-alignment {
  main.newtab-main {
    // This override is to ensure while Discovery Stream loads,
    // the search bar does not jump around. (it sticks to the top)
    margin: 0 auto;
  }
}

.ds-outer-wrapper-breakpoint-override {
  main.newtab-main {
    width: auto;
    padding-block-end: 0;

    .ds-card {
      // Note: This differs when the Sections layout is enabled
      width: var(--newtab-card-grid-layout-width);
    }

    .ds-card-grid:not(.ds-section-grid) {
      grid-gap: var(--space-large);

      &.empty {
        grid-template-columns: auto;
      }
    }

    .body-wrapper {
      width: 346px;
      margin: 0 auto;
    }

    @media (min-width: $break-point-medium) {
      width: auto;

      .ds-card-grid:not(.ds-section-grid) {
        grid-template-columns: repeat(1, 1fr);
      }

      .body-wrapper {
        width: 346px;
      }
    }

    @media (min-width: $break-point-layout-variant) {
      width: auto;

      .ds-card-grid:not(.ds-section-grid) {
        grid-template-columns: repeat(2, 1fr);
      }

      .body-wrapper {
        width: 659px;
      }
    }

    @media (min-width: $break-point-widest) {
      width: auto;

      .ds-card-grid:not(.ds-section-grid) {
        grid-template-columns: repeat(3, 1fr);
        grid-gap: var(--space-xlarge);
      }

      .body-wrapper {
        width: 989px;
      }
    }

    @media (min-width: $break-point-ultra-wide) {
      width: auto;

      .body-wrapper {
        display: flex;
        flex-direction: column;
        width: 1311px;
      }

      .ds-highlights .card-outer {
        min-width: 216px;
      }

      .ds-card-grid:not(.ds-section-grid) {
        grid-template-columns: repeat(4, 1fr);
      }
    }
  }
}

.base-content-fallback {
  // Make the error message be centered against the viewport
  height: 100vh;
}

.body-wrapper {
  // Hide certain elements so the page structure is fixed, e.g., placeholders,
  // while avoiding flashes of changing content, e.g., icons and text
  $selectors-to-hide: '.section-title, .sections-list .section:last-of-type, .topics';

  #{$selectors-to-hide} {
    opacity: 0;
  }

  &.on {
    #{$selectors-to-hide} {
      opacity: 1;
    }
  }
}

.non-collapsible-section {
  padding: 0;
}

.prefs-button {
  button {
    background-color: transparent;
    border: 0;
    border-radius: var(--button-border-radius);
    cursor: pointer;
    padding: var(--space-large);
    position: fixed;
    inset-inline-end: var(--space-large);
    inset-block-start: var(--space-large);
    z-index: 1000;

    &:hover,
    &:focus {
      background-color: var(--newtab-element-hover-color);
    }

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

.wallpaper-attribution {
  padding: 0 var(--space-xlarge);
  font-size: var(--font-size-small);
  color: var(--newtab-contextual-text-primary-color);
  position: absolute;
  inset-block-end: var(--space-large);
  inset-inline-start: 0;

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

  &.theme-light {
    display: inline-block;

    @include dark-theme-only {
      display: none;
    }
  }

  &.theme-dark {
    display: none;

    @include dark-theme-only {
      display: inline-block;
    }
  }

  a {
    color: inherit;

    &:hover {
      text-decoration: none;
    }
  }
}

.asrouter-newtab-message-wrapper {
  background-color: var(--background-color-canvas);
  border: 2px solid var(--card-border-color);
  color: var(--text-color);
  border-radius: var(--border-radius-large);
  margin-block: 0 var(--space-xlarge);
  margin-inline: auto;
  overflow: hidden;
  max-width: 300px;

  /**
   * Bug 2021914 - this is temporary until we get the Nova grid rules more
   * proliferated on New Tab.
   */
  @media (min-width: $break-point-layout-variant) {
    max-width: 904px;
  }
}

// @nova-cleanup(remove-conditional): Remove this selector; move color, min-height, and padding-block-start into the default outer wrapper styles.
.nova-outer-wrapper {
  color: var(--newtab-text-primary-color);
  min-height: 100vh;
  padding-block-start: var(--space-xlarge);
}

.asrouter-multistage-message-wrapper {
  margin-block: var(--space-xlarge);
}