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

@use "sass:math";
@import "@blueprintjs/icons/lib/scss/variables";

$palette-spacing: $pt-grid-size * 2;
$palette-border-radius: 4px;

$swatch-height: $pt-input-height-large;
$swatch-hover-offset: -4px;

$swatch-hover-message: "Click to copy hex code";
$swatch-copied-message: "#{map-get($blueprint-icon-codepoints, "tick")} Copied to clipboard";

@function palette-width($columns) {
  @return math.div(102% - 2% * $columns, $columns);
}

.docs-clipboard {
  > input {
    opacity: 0;
    position: absolute;
  }

  .docs-clipboard-message::after {
    content: attr(data-message);
    line-height: 1;
  }

  input:focus + .docs-clipboard-message::after,
  &:hover .docs-clipboard-message::after {
    content: $swatch-hover-message;
  }

  input:focus + .docs-clipboard-message[data-hover-message]::after,
  &:hover .docs-clipboard-message[data-hover-message]::after {
    content: attr(data-hover-message);
  }

  // override more specific selector above
  /* stylelint-disable declaration-no-important */
  &.docs-clipboard-copied .docs-clipboard-message::after {
    content: $swatch-copied-message !important;
    font-family: $blueprint-icons-16-font, $pt-font-family-monospace, sans-serif;
  }

  &.docs-clipboard-copied .docs-clipboard-message[data-copied-message]::after {
    content: attr(data-copied-message) !important;
  }
  /* stylelint-enable declaration-no-important */
}

.docs-color-book {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .docs-color-scheme & {
    margin-left: (-$pt-grid-size);
    margin-right: (-$pt-grid-size);
  }
}

.docs-color-bar {
  border-radius: $pt-border-radius;
  box-shadow: $pt-elevation-shadow-0;
  transition: all $pt-transition-duration $pt-transition-ease;

  input:focus + &,
  &:hover {
    box-shadow: $pt-elevation-shadow-3;
    cursor: pointer;
  }

  &:active {
    box-shadow: $pt-elevation-shadow-1;
  }

  .docs-color-bar-swatches::before {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .#{$ns}-dark & {
    background: transparent;
    box-shadow: $pt-dark-elevation-shadow-0;

    &:hover {
      box-shadow: $pt-dark-elevation-shadow-3;
      cursor: pointer;
    }

    &:active {
      box-shadow: $pt-dark-elevation-shadow-1;
    }

    pre { box-shadow: none; }
  }
}

label.docs-color-scheme-label { margin: ($pt-grid-size * 2) 0; }
.docs-color-scheme-radios { margin-bottom: $pt-grid-size; }

.docs-color-bar-hexes {
  background: $white;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: none;
  margin: 0;
}

.docs-color-palette {
  cursor: pointer;
  flex: 0 0 palette-width(2);
  margin-bottom: $palette-spacing;
  position: relative;

  .docs-color-book-grayscale & {
    flex-basis: palette-width(3);
  }

  &::before {
    @include position-all(absolute, -$palette-border-radius * 0.5);
    border-radius: $palette-border-radius;
    box-shadow: border-shadow(0, $pt-intent-primary, 0);
    content: "";
    transition: box-shadow $pt-transition-duration $pt-transition-ease;
  }

  &.selected::before {
    box-shadow: border-shadow(1, $pt-intent-primary, 2px);
  }

  .docs-color-scheme & {
    flex: 1 1 auto;
    margin: 0 $pt-grid-size;
  }
}

.docs-color-swatch {
  border: 1px solid rgba($black, $pt-border-shadow-opacity * 200%);
  border-bottom-width: 0;
  border-top-width: 0;
  display: block;
  font-family: $pt-font-family-monospace;
  height: $swatch-height;
  position: relative;

  &:first-child {
    border-top-left-radius: $pt-border-radius;
    border-top-right-radius: $pt-border-radius;
    border-top-width: 1px;
  }

  &:last-child {
    border-bottom-left-radius: $pt-border-radius;
    border-bottom-right-radius: $pt-border-radius;
    border-bottom-width: 1px;
  }

  input:focus + .docs-color-swatch-trigger,
  &:hover .docs-color-swatch-trigger {
    @include position-all(absolute, $swatch-hover-offset);
    border-radius: $pt-border-radius;
    box-shadow: inset border-shadow($pt-border-shadow-opacity * 2),
                      0 2px 4px rgba($black, $pt-drop-shadow-opacity * 50%),
                      0 8px 24px rgba($black, $pt-drop-shadow-opacity);
    z-index: $pt-z-index-base + 1;
  }

  &:active .docs-color-swatch-trigger {
    @include position-all(absolute, $swatch-hover-offset * 0.5);
    box-shadow: inset border-shadow($pt-border-shadow-opacity * 2),
                0 1px 1px rgba($black, $pt-drop-shadow-opacity);
  }

  .#{$ns}-dark & {
    border-color: rgba($white, $pt-dark-border-shadow-opacity);

    &:hover .docs-color-swatch-trigger {
      box-shadow: inset border-shadow($pt-dark-border-shadow-opacity, $color: $white),
                  0 2px 4px rgba($black, $pt-dark-drop-shadow-opacity * 50%),
                  0 8px 24px rgba($black, $pt-dark-drop-shadow-opacity);
    }

    &:active .docs-color-swatch-trigger {
      box-shadow: inset border-shadow($pt-dark-border-shadow-opacity, $color: $white),
                  0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity);
    }
  }
}

.docs-color-swatch-trigger {
  @include position-all(absolute, 0);
  align-items: center;
  background-color: inherit;
  border-radius: inherit;
  cursor: pointer;
  display: flex;
  font-size: $pt-font-size-small;
  justify-content: space-between;
  line-height: 1;
  padding: 0 $pt-grid-size;
  transition: all $pt-transition-duration $pt-transition-ease;
  white-space: nowrap;

  // ClickToCopy uses ::after element for variable name so we re-order in flexbox
  span { order: 1; }
}

.docs-color-bar-swatches {
  display: flex;
  margin-left: -1px;
  position: relative;
  top: -1px;
  width: calc(100% + 2px);

  &::before {
    @include position-all(absolute, 0);
    border-radius: $pt-border-radius;
    box-shadow: inset 0 0 0 1px $pt-divider-black;
    content: "";

    display: block;
    pointer-events: none;
    user-select: none;
    z-index: 2;

    .#{$ns}-dark & {
      box-shadow: inset 0 0 0 1px $pt-dark-divider-white;
    }
  }

  .docs-color-swatch {
    border: none;
    flex: 0 1 100%;

    &:first-child {
      border-top-right-radius: 0;
    }

    &:last-child {
      border-radius: 0;
      border-top-right-radius: $pt-border-radius;
    }
  }
}

$aliases: (
  intent-primary: $pt-intent-primary,
  intent-success: $pt-intent-success,
  intent-warning: $pt-intent-warning,
  intent-danger: $pt-intent-danger,
  app-background-color: $pt-app-background-color,
  dark-app-background-color: $pt-dark-app-background-color,
  text-color: $pt-text-color,
  text-color-muted: $pt-text-color-muted,
  text-color-disabled: $pt-text-color-disabled,
  heading-color: $pt-heading-color,
  link-color: $pt-link-color,
  dark-text-color: $pt-dark-text-color,
  dark-text-color-muted: $pt-dark-text-color-muted,
  dark-text-color-disabled: $pt-dark-text-color-disabled,
  dark-heading-color: $pt-dark-heading-color,
  dark-link-color: $pt-dark-link-color,
  text-selection-color: $pt-text-selection-color,
  icon-color: $pt-icon-color,
  icon-color-hover: $pt-icon-color-hover,
  icon-color-disabled: $pt-icon-color-disabled,
  icon-color-selected: $pt-icon-color-selected,
  dark-icon-color: $pt-dark-icon-color,
  dark-icon-color-hover: $pt-dark-icon-color-hover,
  dark-icon-color-disabled: $pt-dark-icon-color-disabled,
  dark-icon-color-selected: $pt-dark-icon-color-selected,
  divider-black: $pt-divider-black,
  dark-divider-black: $pt-dark-divider-black,
  dark-divider-white: $pt-dark-divider-white,
  code-text-color: $pt-code-text-color,
  dark-code-text-color: $pt-dark-code-text-color,
  code-background-color: $pt-code-background-color,
  dark-code-background-color: $pt-dark-code-background-color,
);

@each $alias, $color in $aliases {
  .alias-#{$alias} {
    background-color: $color;
  }
}

$bubble-size: $pt-grid-size * 2;

.docs-color-bubble {
  border-radius: $pt-border-radius;
  box-shadow: inset border-shadow(0.15);
  display: inline-block;
  height: $bubble-size;
  vertical-align: middle;
  width: $bubble-size;

  .#{$ns}-dark & {
    box-shadow: inset border-shadow(0.2, $white);
  }
}
