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

:host {
  display: flex;
  justify-content: center;
  width: 100%;

  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);
    }

  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--septenary-contrast);
    border-radius: 10px;
    transition: background-color 0.3s ease;
  }

  &>* {
    padding-inline: 0px;

    @include mq.for-extra-large-desktop-up {
      width: var(--page-width);
    }
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  h3 {
    font-size: 1rem;
  }

  h4 {
    font-size: 0.95rem;
  }

  h5 {
    font-size: 0.875rem;
  }

  h6 {
    font-size: 0.6rem;
  }


}

::ng-deep {
  @include ref.reference-common();
  @include ref.api-reference();
}
