@use '@angular/docs/styles/media-queries' as mq;
@use '@angular/docs/styles/reference' as ref;

:host {
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding-top: var(--layout-padding);
  padding-bottom: var(--layout-padding);



  //applying styles when TOC position got translated to the top right
  @include mq.for-large-desktop-up{
    // take the available space except a reserved area for TOC
    width: calc(100% - 16rem);
  }


  main {
    display: block;
    padding-inline: var(--layout-padding);
    width: 100%;

    //applying styles when TOC position got translated to the top right
    @include mq.for-large-desktop-up{
      // take the available space except a reserved area for TOC
      max-width: var(--page-width);
    }
  }

  &>* {
    width: 100%;

    @include mq.for-desktop-up {
      padding-inline: 0px;
      width: var(--page-width);
    }
  }
}

// stylelint-disable-next-line
::ng-deep {
  @include ref.reference-common();
  @include ref.cli-reference();
}
