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

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

// Generate a selector for a page ID by reference
@function page($ref, $comparator: "$=") {
  @return '[data-page-id#{$comparator}"#{$ref}"]';
}

// Generate a selector for a React component example by name
@function example($ComponentName, $comparator: "=") {
  @return '[data-example-id#{$comparator}"#{$ComponentName}Example"]';
}

// Common modifiers, incubating usage before they can be incorporated into @blueprintjs/docs-theme

.docs-flex-column {
  display: flex;
  flex-direction: column;
  width: 100%;
}

// Example-specific customizations

//
// CORE
//

@keyframes docs-wiggle-rotate {
  0% { transform: rotate(0); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
  100% { transform: rotate(0); }
}

#{page("tree")} .#{$ns}-tree {
  width: $pt-grid-size * 35;
}

#{example("Buttons")} {
  .docs-example {
    flex-direction: column;
    gap: $pt-grid-size * 3;

    > * {
      margin: 0;
    }

    p {
      text-align: center;
    }
  }

  .docs-wiggle {
    animation: docs-wiggle-rotate $pt-transition-duration $pt-transition-ease infinite;
  }
}

#{example("EditableText")} {
  .docs-example {
    display: block;
  }

  h1 {
    margin-bottom: $pt-grid-size * 3;
  }
}

#{example("FormGroup")} {
  .docs-example {
    flex-direction: column;
  }

  .#{$ns}-form-content {
    width: $pt-grid-size * 20;
  }
}

#{example("Menu")} .#{$ns}-menu {
  max-width: 280px;
}

#{example("Dialog")} .docs-example-options {
  max-width: 260px;
}

.docs-multistep-dialog-example-step {
  min-height: 150px;
}

#{example("Tag")} {
  .docs-example {
    flex-direction: column;
  }
}

.docs-context-menu-example {
  .docs-example {
    flex-direction: column;
    height: $pt-grid-size * 25;
  }

  .docs-context-menu-node {
    $node-size: $pt-grid-size * 8;
    $icon-size: $pt-icon-size-standard * 2;
    $node-border-width: 4px;
    background-color: $blue5;

    border: $node-border-width solid $white;
    border-radius: 50%;
    box-shadow: $pt-elevation-shadow-2;
    height: $node-size;
    overflow: hidden;
    width: $node-size;

    &::before {
      @include pt-icon($icon-size, 16);
      color: $white;
      content: map-get($blueprint-icon-codepoints, "envelope");
      left: ($node-size - $icon-size) * 0.5 - $node-border-width;
      position: relative;
      top: ($node-size - $icon-size) * 0.5 - $node-border-width;
    }

    &.docs-context-menu-open {
      box-shadow: $pt-elevation-shadow-2, 0 0 0 4px $orange4;
    }
  }
}

.docs-hotkey-piano-example {
  opacity: 0.4;
  transition: opacity ($pt-transition-duration * 2) $pt-transition-ease;

  &:hover {
    cursor: pointer;
    opacity: 0.6;
  }

  &:focus {
    cursor: default;
    opacity: 1;
  }

  > :first-child {
    margin-bottom: $pt-grid-size * 2;
  }

  .piano-key {
    display: inline-block;
    position: relative;
    z-index: 1;

    > div {
      background-color: $white;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      color: $black;
      height: $pt-grid-size * 24;
      margin-right: $pt-grid-size*0.5;
      width: $pt-grid-size * 8;
    }
  }

  .piano-key-sharp {
    overflow: visible;
    vertical-align: top;
    width: 0;
    z-index: 2;

    > div {
      background-color: $black;
      color: $white;
      height: $pt-grid-size * 16;
      left: $pt-grid-size * -4;
      position: absolute;
      top: 0;
    }
  }

  .piano-key-pressed > div {
    background-color: $pt-intent-primary;
    color: $white;
  }

  .piano-key-text {
    bottom: 5px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
  }

  .piano-key-note {
    opacity: 0.5;
  }
}

#{example("HotkeyTesterExample")} {
  .docs-hotkey-tester {
    @include pt-flex-container(column, $pt-grid-size);
    align-items: center;
    background: rgba($gray3, 0.2);
    border: 2px solid rgba($gray3, 0.8);
    border-radius: $pt-border-radius * 2;
    flex: 1 1;
    justify-content: space-around;
    max-width: 70%;
    min-height: $pt-grid-size * 12;
    opacity: 0.4;
    padding: $pt-grid-size * 2;
    transition: all $pt-transition-duration $pt-transition-ease;

    &:hover {
      cursor: pointer;
      opacity: 0.6;
    }

    &:focus {
      background: rgba($blue3, 0.1);
      border: 2px solid rgba($blue3, 0.6);
      color: map-get($pt-intent-text-colors, "primary");
      cursor: default;
      opacity: 1;

      .#{$ns}-dark & {
        background: rgba($blue4, 0.1);
        border: 2px solid rgba($blue4, 0.6);
        color: map-get($pt-dark-intent-text-colors, "primary");
      }
    }
  }
}

#{example("OverflowList")} {
  .#{$ns}-card {
    margin: 0;
    min-width: $pt-grid-size * 7;
  }

  .#{$ns}-overflow-list {
    white-space: nowrap;
  }
}

// prettier-ignore
.docs-overlay-example-transition {
  $overlay-example-width: $pt-grid-size * 40;
  $enter: (
    transform: (translateY(-50vh) rotate(-10deg), translateY(0) rotate(0deg))
  );
  $leave: (
    transform: (translateY(150vh) rotate(-20deg), translateY(0) rotate(0deg))
  );

  @include react-transition-phase(
    "#{$ns}-overlay",
    "enter",
    $enter,
    $pt-transition-duration * 3,
    $pt-transition-ease-bounce,
    $before: "&"
  );
  @include react-transition-phase(
    "#{$ns}-overlay",
    "exit",
    $leave,
    $pt-transition-duration * 5,
    $before: "&"
  );
  left: calc(50vw - #{$overlay-example-width * 0.5});
  margin: 10vh 0;

  top: 0;
  width: $overlay-example-width;
}

.docs-overlay-example-tall {
  height: 200%;
}

#{example("Popover2")},
#{example("Popover")} {
  .docs-example {
    display: block;
    max-height: 785px;
    overflow: scroll;
    padding: 0;
    position: relative; // create a stacking context for when usePortal={false}
  }

  .docs-popover2-example-scroll,
  .docs-popover-example-scroll {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 1700px;
    justify-content: center;
    margin: 0;
    width: 1600px;

    > p {
      margin-top: $pt-grid-size;
    }
  }
}

#{example("Popover2Dismiss")},
#{example("PopoverDismiss")} {
  height: 220px;

  .docs-reopen-message {
    text-align: center;
    width: 240px;
  }

  .#{$ns}-popover2-content,
  .#{$ns}-popover-content {
    min-width: 300px;
    padding: $pt-grid-size * 2;

    .#{$ns}-button:not(:first-child) {
      margin-left: $pt-grid-size;
    }

    .#{$ns}-callout {
      margin: $pt-grid-size 0;
    }
  }
}

#{example("PanelStack2")},
#{example("PanelStack")} {
  .docs-panel-stack-example {
    box-shadow: $pt-elevation-shadow-0;
    height: 240px;
    width: 300px;
  }

  .docs-panel-stack-contents-example {
    align-items: center;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px;
  }

  ul {
    max-height: 240px;
    overflow: auto;
  }
}

// deprecated example layout
.docs-popover-position-example {
  td:nth-child(1) {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
  }

  td:nth-child(2) {
    text-align: center;
  }

  td:nth-child(3) {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
  }

  .#{$ns}-popover-wrapper {
    // Add a bit of space between borders of consecutive buttons.
    margin: $pt-grid-size * 0.5;
  }
}

.docs-popover2-placement-example {
  .docs-example-grid {
    display: grid;
    gap: $pt-grid-size;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 2fr 1fr;
    justify-content: stretch;
    margin: 0;
  }

  @each $row-line in (1, 2, 3) {
    @each $col-line in (1, 2, 3) {
      .docs-example-grid-#{$row-line}-#{$col-line} {
        grid-column: #{$col-line}/#{$col-line + 1};
        grid-row: #{$row-line}/#{$row-line + 1};
      }
    }
  }

  @each $line in (1, 2, 3) {
    // top row and first col
    .docs-example-grid-1-#{$line},
    .docs-example-grid-#{$line}-1 {
      align-self: end;
    }

    // middle row and middle col
    .docs-example-grid-2-#{$line},
    .docs-example-grid-#{$line}-2 {
      align-self: stretch;
    }

    // last row and last col
    .docs-example-grid-3-#{$line},
    .docs-example-grid-#{$line}-3 {
      align-self: start;
    }
  }

  // middle area
  .docs-example-grid-2-2 {
    align-self: center;
    text-align: center;
  }
}

.docs-popover2-placement-example-content,
.docs-popover-position-example-content {
  .#{$ns}-popover2-content,
  .#{$ns}-popover-content {
    line-height: 2;
    padding: $pt-grid-size ($pt-grid-size * 2);
    text-align: center;
  }

  code {
    font-weight: 600;
  }
}

.docs-popover2-placement-example,
.docs-popover-position-example {
  em {
    display: inline-block;
    max-width: 25 * $pt-grid-size;

    .#{$ns}-dark & {
      color: $pt-dark-text-color-muted;
    }
  }
}

.docs-popover2-placement-value-code-block,
.docs-popover-position-value-code-block {
  font-size: $pt-font-size-large;
  font-weight: 600;
  text-align: center;
}

.docs-popover2-placement-label-side,
.docs-popover-position-label-side {
  color: $cerulean3;

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

.docs-popover2-placement-label-alignment,
.docs-popover-position-label-alignment {
  color: $forest3;

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

.docs-popover2-minimal-example,
.docs-popover-minimal-example {
  .#{$ns}-button:first-child {
    margin-right: $pt-grid-size;
  }
}

.docs-popover2-interaction-kind-example,
.docs-popover-interaction-kind-example {
  .#{$ns}-button {
    font-family: $pt-font-family-monospace;
    margin-right: $pt-grid-size;
  }
}

.docs-popover2-sizing-example,
.docs-popover-sizing-example {
  max-height: $pt-grid-size * 15;
  overflow-y: auto;
}

.docs-popover2-portal-example,
.docs-popover-portal-example {
  .docs-popover2-portal-example-scroll-container,
  .docs-popover-portal-example-scroll-container {
    background: $light-gray3;
    border-radius: $pt-border-radius;
    flex: 1 1 auto;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;

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

  .docs-popover2-portal-example-scroll-content,
  .docs-popover-portal-example-scroll-content {
    // can't compute this height easily using SCSS variables. instead of using
    // JS to measure, just hardcode it since we have full control of all the
    // example code.
    $assumed-height-of-target-plus-popover: $pt-grid-size * 8.5;
    $vertical-padding: $pt-grid-size * 2;
    align-items: flex-start;

    display: flex;
    height: $assumed-height-of-target-plus-popover + (2 * $vertical-padding);
    justify-content: center;
    padding-top: $vertical-padding;
    // wide enough to allow scrolling, but wide enough to let the popover target
    // fully leave the viewport.
    width: 200%;
  }
}

.docs-popover2-portal-example-popover,
.docs-popover-portal-example-popover {
  .#{$ns}-popover2-content,
  .#{$ns}-popover-content {
    padding: $pt-grid-size;
    white-space: nowrap;
  }
}

.#{$ns}-progress-bar.docs-toast-progress {
  margin-bottom: 0;
  margin-top: $pt-grid-size * 0.5;
}

#{example("Tooltip2")},
#{example("Tooltip")} {
  .docs-example {
    flex-direction: column;

    > * {
      margin: $pt-grid-size * 0.5;
    }
  }
}

#{example("ButtonGroup")},
#{example("ButtonGroupPopover")} {
  .docs-example > * {
    margin: 0;
  }
}

#{example("Toast")} {
  .docs-example {
    // necessary for inline Toaster (usePortal={false})
    position: relative;
  }
}

#{example("Tabs")} {
  .docs-example .#{$ns}-heading {
    margin-bottom: 0;
  }
}

//
// DATETIME
//

// all datetime examples show component followed by date tags, so arrange them in a nice column
#{page("datetime", "^=")} {
  .docs-example {
    flex-direction: column;
    gap: $pt-grid-size;
    justify-content: center;
  }

  #{example("TimezoneSelect")} .docs-example {
    flex-direction: row;
  }
}

.docs-date-range {
  @include pt-flex-container(row, $pt-grid-size * 0.5);
  align-items: center;
}

#{example("DateInput")} {
  .docs-example > * {
    margin: 0 0 20px;
  }
}

//
// DATETIME2
//

#{example("DateInput2")} {
  .#{$ns}-date-input {
    // should not grow in vertical direction when fill={true}
    flex-grow: 0;
    min-width: 300px;
  }
}

// these component examples have a "fill" prop option, which doesn't work nicely with the default margin
#{example("DateInput2")}, #{example("DateRangeInput2")} {
  .docs-example > * {
    margin: 0;
  }
}


//
// TABLE
//

#{page("table", "^=")} {
  // make all tables the same width & height
  .#{$ns}-table-container {
    height: $pt-grid-size * 36;
    width: 100%;
  }

  // reduce example container padding
  .docs-example {
    padding: 0;
  }
}
