// Copyright 2017 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "variables";
@import "../../../core/src/components/forms/common";

$nav-item-indent: $pt-grid-size * 2;

$nav-item-color-hover: $minimal-button-background-color-hover;
$nav-item-color-active: $minimal-button-background-color-active;
$dark-nav-item-color-hover: $dark-minimal-button-background-color-hover;
$dark-nav-item-color-active: $dark-minimal-button-background-color-active;

body {
  // vertical scrollbar is always visible for the `.#{$ns}-overlay-open` padding (from `scrollbar.ts`)
  overflow-y: scroll;
}

/*
Flex utils
*/

.docs-flex-row {
  @include pt-flex-container(row);
}

.docs-flex-column {
  @include pt-flex-container(column);
}

/*
Page layout elements
*/

.docs-root {
  background-color: $content-background-color;

  &.#{$ns}-dark {
    background-color: $dark-content-background-color;
  }
}

.docs-app {
  @include pt-flex-container(row);
  margin: auto;
  max-width: $container-width;
  min-height: 100vh;
}

.docs-nav-wrapper {
  flex-basis: $sidebar-width;
  position: relative;
  z-index: $pt-z-index-content;
}

.docs-nav {
  $background-shift: 999px;
  background-color: $sidebar-background-color;
  box-shadow: 1px 0 0 $pt-divider-black;
  height: 100vh;

  // these rules allow the nav background-color to cover all area to the left
  /* stylelint-disable-next-line order/properties-order */
  margin-left: -$background-shift;
  overflow-y: auto;
  padding-bottom: $sidebar-padding * 2;
  padding-left: $background-shift + $container-padding;

  position: fixed;
  width: $sidebar-width + $background-shift;

  .#{$ns}-dark & {
    background-color: $dark-sidebar-background-color;
    box-shadow: 1px 0 0 $pt-dark-divider-black;
  }

  > * {
    padding: $sidebar-padding;
    padding-left: 0;
  }
}

.docs-content-wrapper {
  align-items: flex-start;
  background-color: $content-background-color;
  flex-basis: $content-width;
  outline: none;

  .#{$ns}-dark & {
    background-color: $dark-content-background-color;
  }
}

.docs-page {
  max-width: $content-width;
  padding-bottom: $content-padding * 2;
  padding-left: $content-padding * 2;
  padding-right: $container-padding;
  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
  padding-top: 0;
  position: relative;
}

.docs-page-actions {
  position: absolute;
  right: 0;
  top: $container-padding;
  // above h1 heading
  z-index: 1;
}

/*
Lefthand navigation menu
*/

.docs-nav-menu {
  .#{$ns}-menu-item {
    align-items: center;
    padding-left: 0;
    padding-right: $pt-grid-size;
    white-space: initial;

    &:hover,
    &.#{$ns}-active,
    &.docs-nav-expanded {
      // bold text instead of background color
      /* stylelint-disable-next-line declaration-no-important */
      background-color: transparent !important;
      font-weight: 600;
    }

    @each $depth in (1, 2, 3, 4, 5) {
      &.depth-#{$depth} {
        padding-left: $nav-item-indent * $depth;
      }
    }
  }

  .docs-nav-menu {
    // nested menus are hidden by default
    display: none;
    // nested menus indent automatically
    margin-left: $nav-item-indent;
  }

  .docs-nav-expanded + & {
    display: block;
  }
}

.docs-nav-title {
  @include pt-flex-container(row);
  align-items: center;
}

// empty state item is hidden by default...
.docs-empty-state {
  display: none;
}

// ...and appears when the actual menu is empty
.docs-nav-menu:empty + .docs-empty-state {
  display: block;
}

// hides all documentation content, to focus on live examples
// trigger this behavior by adding ?examples to URL immediately after the path (before #route):
// http://blueprintjs.com/docs/?examples
.docs-examples-only {
  .docs-markup,
  .docs-modifiers,
  .docs-title,
  .docs-section > .#{$ns}-running-text {
    display: none;
  }
}
