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

@import "@blueprintjs/core/src/components/icon/icon-mixins";
@import "@blueprintjs/icons/lib/scss/variables";
@import "variables";

$heading-margin: $pt-grid-size * 4;
$link-icon-padding: $pt-grid-size;

$class-modifier-color: $rose4;
$attribute-modifier-color: $violet5;

// title of a section
.docs-title {
  margin: $heading-margin 0 ($heading-margin * 0.5);
  position: relative;

  // first heading (the h1 at the top) needs smaller top margin to avoid extra scrolling
  .depth-1 > & {
    margin-top: $content-padding;
  }
}

// this element inside the <h*> tag creates extra space above when it is targeted by the location hash
// but it doesn't change the bounds of the element or interfere with interactions. (thanks React docs site!)
// so the heading will appear _below_ the navbar (since the navbar covers the top 50px of window).
.docs-anchor {
  margin-top: -$content-padding * 2;
  position: absolute;
}

.docs-anchor-link {
  @include pt-icon-colors();
  left: 0;
  line-height: $pt-icon-size-standard;
  opacity: 0;
  padding: $link-icon-padding;
  position: absolute;
  top: 50%;
  transform: translate(-100%, -50%);

  .#{$ns}-icon-standard {
    vertical-align: top;
  }

  &:focus,
  .docs-title:hover & {
    opacity: 1;
  }
}

.docs-markup .editor {
  margin: 0;
}

// DEPRECATED, these use old classes generated by the syntax highlighter
// additions to the syntax theme
.editor {
  color: inherit;
  overflow: auto;

  // TODO(adahiya): remove in Blueprint v5.0
  // DEPRECATED STYLES, no longer used with monaco-editor syntax higlighting
  .line {
    line-height: 1.5;
    padding-right: $pt-grid-size * 2;
    white-space: nowrap;
  }

  .support.constant.handlebars {
    // hide the {{ }} cuz who cares
    display: none;

    // color for {{:modifier}} to match modifier table
    + span {
      background: rgba($attribute-modifier-color, 0.15);
      border-radius: $pt-border-radius;
      color: $attribute-modifier-color;
      padding: 0 3px;
    }

    // adjust colors for {{.modifier}}
    + .variable {
      background: rgba($class-modifier-color, 0.15);
      color: $class-modifier-color;
    }
  }
}
