/**
 * Licensed to the .NET Foundation under one or more agreements.
 * The .NET Foundation licenses this file to you under the MIT license.
 */

@use "bootstrap/scss/bootstrap";

$header-height: 60px;
$footer-height: 60px;
$main-padding-top: 1.6rem;
$main-padding-bottom: 2rem;

// Makes a div sticky to top
@mixin sticky-top {
  @include bootstrap.media-breakpoint-up(md) {
    position: sticky;
    top: 0;
    z-index: 1030;
  }
}

@mixin stick-to-header {
  @include bootstrap.media-breakpoint-up(md) {
    position: sticky;
    top: calc($header-height + $main-padding-top);
  }
}

html {
  width: calc(100vw - var(--scrollbar-width));
  min-height: 100vh;
  overflow-x: hidden;
}

body,
body[data-layout="landing"] {
  width: calc(100vw - var(--scrollbar-width));
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  >header {
    display: flex;
    align-items: stretch;

    @include sticky-top;

    @include bootstrap.media-breakpoint-up(md) {
      height: $header-height;
    }

    >nav {
      flex: 1;
    }
  }

  >footer {
    font-size: 14px;
    padding: 1rem 0;
    height: $footer-height;

    >div {
      display: flex;
      align-items: center;
    }
  }

  >main {
    display: flex;
    flex: 1;
    padding-top: $main-padding-top;
    padding-bottom: $main-padding-bottom;

    >.content {
      display: flex;
      flex-direction: column;
      width: 100%;

      >:not(article) {
        display: none;
      }

      >article {
        flex: 1;
      }

      @include bootstrap.media-breakpoint-up(md) {
        >article [id] {
          scroll-margin-top: $header-height;
        }
      }
    }

    >:not(.content) {
      display: none;
    }
  }

  @media print {
    >main {
      padding: 0 !important;
    }

    >header, >footer {
      display: none;
    }
  }
}

@media not print {
  // Search layout
  body[data-search] {
    >main {
      display: none;
    }

    >.search-results {
      display: block;
      flex: 1;
      padding-top: $main-padding-top;
      padding-bottom: $main-padding-bottom;
    }
  }

  body:not([data-search]) {
    >.search-results {
      display: none;
    }

    // Default layout: with header, footer, actionbar, affix, and toc
    &[data-layout=""],
    &[data-layout="conceptual"] {
      >main {
        padding-bottom: 0;

        >.toc-offcanvas {
          flex: .35;
          display: block;
          overflow: hidden;
          max-width: 360px;
          max-height: calc(100vh - $header-height - $main-padding-top);

          @include stick-to-header;

          @include bootstrap.media-breakpoint-down(md) {
            flex: 0;
          }

          .offcanvas-start, .offcanvas-body {
            height: 100%;
          }
        }

        >.content {
          display: flex;
          flex-direction: column;
          flex: 1;
          min-width: 0;
          margin: 0 3rem;
          padding-bottom: $main-padding-bottom;

          >.actionbar {
            display: flex;
            align-items: flex-start;
            margin-top: .5rem;

            >button {
              margin-top: -.65em;
              margin-left: -.8em
            }
          }

          article {
            flex: 1;
          }

          >.contribution,
          >.next-article {
            display: flex;
          }

          @include bootstrap.media-breakpoint-down(lg) {
            margin: 0 1rem;
          }

          @include bootstrap.media-breakpoint-down(md) {
            margin: 0;
          }
        }

        >.affix {
          display: block;
          width: 230px;
          max-height: calc(100vh - $header-height - $main-padding-top);

          /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
          overflow-x: hidden;
          /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
          overflow-y: auto;

          @include stick-to-header;

          @media only screen and (max-width: 1140px) {
            display: none;
          }
        }
      }
    }

    // Chromeless layout: with no header, footer, actionbar, affix, and toc
    &[data-layout="chromeless"] {
      >header, >footer {
        display: none;
      }
    }
  }
}
