.outer-wrapper {
  color: var(--newtab-text-primary-color);
  display: flex;
  flex-grow: 1;
  min-height: 100vh;
  padding: ($section-spacing + $section-vertical-padding) $base-gutter $base-gutter;

  &.ds-outer-wrapper-breakpoint-override {
    padding: 30px 0 32px;

    @media(min-width: $break-point-medium) {
      padding: 30px 32px 32px;
    }
  }

  &.only-search {
    display: block;
    padding-top: 134px;
  }

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

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

  &.newtab-main {
    min-width: min-content;
  }

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

  section {
    margin-bottom: $section-spacing;
    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;
  }
}

.ds-outer-wrapper-search-alignment {
  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 {
    width: 266px;
    padding-bottom: 0;

    @media (min-width: $break-point-medium) {
      width: 510px;
    }

    @media (min-width: $break-point-large) {
      width: 746px;
    }

    @media (min-width: $break-point-widest) {
      width: 986px;
    }
  }
}

// Bug 1931979: Note that .ds-card-grid has an exception for
// the card section experiment layout
.layout-variant-a,
.layout-variant-b {
  .ds-outer-wrapper-breakpoint-override main {
    width: auto;

    .ds-card {
      width: 296px;
    }

    .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 $section-horizontal-padding;

  // Bug 1914053 - Layout experiment: search bar width
  .layout-variant-a &,
  .layout-variant-b & {
    padding: 0;
  }
}

.prefs-button {
  button {
    background-color: transparent;
    border: 0;
    border-radius: var(--button-border-radius);
    cursor: pointer;
    inset-inline-end: 15px;
    padding: 15px;
    position: fixed;
    top: 15px;
    z-index: 1000;

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

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

.wallpaper-attribution {
  padding: 0 $section-horizontal-padding;
  font-size: var(--font-size-small);
  color: var(--newtab-contextual-text-primary-color);

  // Bug 1902063 - Edge case where user has single element
  // on vertical center of HNT page. If so, display the
  // attribution at the bottom corner of the screen
  .no-search .no-sections &,
  .only-search  &,
  .only-topsites  & {
    @media (min-width: $break-point-large) {
      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;
    }
  }
}