html:not(:has(.has-full-page-chat)) {
  // @include breakpoint(extra-large, $rule: min-width) {
  background-color: var(--background-color);
  // }
}

:root {
  --main-grid-gap: 2em;
}

#main-outlet-wrapper {
  gap: var(--main-grid-gap);
}

body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
  grid-column-gap: var(--main-grid-gap);
}

body.has-sidebar-page #main-outlet-wrapper {
  grid-template-columns: var(--d-sidebar-width) 1fr 0px;
  #main-outlet {
    max-width: unset;
  }
}

body:not(.has-full-page-chat) {
  @include breakpoint(extra-large, $rule: min-width) {
    background-color: var(--background-color);
  }
  #main-outlet-wrapper {
    @include breakpoint(medium) {
      --main-grid-gap: 0;
    }
    @include breakpoint(tablet, $rule: min-width) {
      gap: var(--main-grid-gap);
    }
    // height: calc(100vh - var(--header-offset) - 4rem);
    // box-sizing: border-box;
    // > * {
    // height: inherit;
    // box-sizing: border-box;
    // }
    #main-outlet {
      width: 100%;
      padding-bottom: var(--spacing-block-l);
      // height: inherit;
      // overflow: scroll;
      // &:has(.list-controls) {
      // padding-top: 0;
      // }
      // &:has(#topic-title) {
      // padding-top: 0;
      // }
      //thanks to random container elements on the page, I can't do a direct child selector here because it targets all the randomness, so I see no other option than MANUALLY adding every possible element that can appear in the main outlet YAY
      .list-controls,
      .list-container,
      #topic-title,
      .container.posts,
      #topic-footer-buttons,
      .more-topics__container,
      .search-banner,
      .container.viewing-self,
      .reviewable,
      .admin-content,
      .discourse-post-event-upcoming-events,
      .container.groups-index,
      .body-page,
      .container.badges,
      .topic-above-footer-buttons-outlet .presence-users,
      .global-notice {
        max-width: 1000px;
        margin-inline: auto;
        padding-inline: 1.5em;
      }
      border-radius: var(--d-border-radius-large);
      @include breakpoint(medium) {
        border-radius: 0px;
      }
      border-radius: 1.25rem;
      // box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
      background-color: var(--d-content-background);
    }
  }

  // .global-notice {
  //   margin-top: var(--spacing-block-m);
  // }
}

.list-container {
  .topic-list-body {
    padding-top: var(--spacing-block-m);
  }
}

aside.onebox {
  background-color: var(--d-content-background);
}

.d-editor-preview-wrapper {
  box-shadow: 0px 0px 1px 2px var(--tertiary-50),
    0px 0px 24px 4px var(--tertiary-50);
  border-radius: var(--d-border-radius-large);
  padding: 1em;
  background-color: var(--d-content-background);
}