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

/* stylelint-disable alpha-value-notation */
@import "@blueprintjs/icons/lib/scss/variables";
@import "../../common/variables";
@import "../button/common";

$input-padding-horizontal: $pt-spacing * 2 !default;
$input-small-padding: $pt-input-height-small - $pt-icon-size-standard !default;
$input-font-weight: 400 !default;
$input-transition: box-shadow $pt-transition-duration $pt-transition-ease;

$input-color: $pt-text-color !default;
$input-color-disabled: $button-color-disabled !default;
$input-placeholder-color: $pt-text-color-muted !default;
$input-background-color: $white !default;
$input-background-color-disabled: rgba($light-gray1, 0.5) !default;
$input-shadow-color-focus: $pt-focus-indicator-color;

$dark-input-color: $pt-dark-text-color !default;
$dark-input-color-disabled: $dark-button-color-disabled !default;
$dark-input-placeholder-color: $pt-dark-text-color-muted !default;
$dark-input-background-color: rgba($black, 0.3) !default;
$dark-input-background-color-disabled: rgba($dark-gray5, 0.5) !default;
$dark-input-shadow-color-focus: $pt-dark-focus-indicator-color;

$control-indicator-size: $pt-icon-size-standard !default;
$control-indicator-size-large: $pt-icon-size-large !default;

// avoids edge blurriness for light theme focused default input
// second box-shadow of $pt-input-box-shadow
$input-box-shadow-focus: inset 0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;

// for best visual results, button group and control group elements should be
// stacked in the following order to ensure sharp edges in all cases and states:

$control-group-stack: (
  // lowest z-index
  "input-disabled",
  "input-default",
  "button-disabled",
  "button-default",
  "button-focus",
  "button-hover",
  "button-active",
  "intent-button-disabled",
  "intent-button-default",
  "intent-button-focus",
  "intent-button-hover",
  "intent-button-active",
  "intent-input-default",
  "input-focus",
  "intent-input-focus",
  "input-group-children",
  "select-caret"
);

// animating shadows requires the same number of shadows in different states
@function input-transition-shadow(
  $color: $input-shadow-color-focus,
  $focus: false,
  $outer-shadow-focus-width: 1px
) {
  @if $focus {
    @return inset 0 0 0 1px #{oklch(from #{$color} l c h / 0.752)},
      0 0 0 #{$outer-shadow-focus-width} #{oklch(from #{$color} l c h / 0.752)};
  } @else {
    @return 0 0 0 0 #{oklch(from #{$color} l c h / 0)}, 0 0 0 0 #{oklch(from #{$color} l c h / 0)};
  }
}

@function dark-input-transition-shadow(
  $color: $dark-input-shadow-color-focus,
  $focus: false,
  $outer-shadow-focus-width: 1px
) {
  @if $focus {
    @return inset 0 0 0 1px #{oklch(from #{$color} l c h / 0.752)},
      0 0 0 #{$outer-shadow-focus-width} #{oklch(from #{$color} l c h / 0.752)};
  } @else {
    @return 0 0 0 0 #{oklch(from #{$color} l c h / 0)}, 0 0 0 0 #{oklch(from #{$color} l c h / 0)};
  }
}

@mixin pt-input() {
  @include pt-input-placeholder;
  appearance: none;
  background: var(--bp-surface-background-color-default-rest);
  border: none;
  border-radius: var(--bp-surface-border-radius);
  box-shadow:
    inset 0 0 0 0
      #{"oklch(from var(--bp-intent-primary-rest) calc(l - 0.074) calc(c - 0.018) h / 0)"},
    0 0 0 0 #{"oklch(from var(--bp-intent-primary-rest) calc(l - 0.074) calc(c - 0.018) h / 0)"},
    inset 0 0 0 1px #{oklch(from var(--bp-palette-black) l c h / 0.2)},
    inset 0 1px 1px #{oklch(from var(--bp-palette-black) l c h / 0.3)};
  color: var(--bp-typography-color-default-rest);
  font-size: var(--bp-typography-size-body-medium);
  font-weight: var(--bp-typography-weight-default);
  height: calc(var(--bp-surface-spacing) * 7.5);
  line-height: calc(var(--bp-surface-spacing) * 7.5);

  outline: none;
  padding: 0 calc(var(--bp-surface-spacing) * 2);
  transition: box-shadow var(--bp-emphasis-transition-duration) var(--bp-emphasis-ease-default);
  vertical-align: middle;

  &:focus,
  &.#{$ns}-active {
    box-shadow:
      inset 0 0 0 1px
        #{"oklch(from var(--bp-intent-primary-rest) calc(l - 0.074) calc(c - 0.018) h / 0.752)"},
      0 0 0 1px
        #{"oklch(from var(--bp-intent-primary-rest) calc(l - 0.074) calc(c - 0.018) h / 0.752)"},
      inset 0 1px 1px #{oklch(from var(--bp-palette-black) l c h / 0.2)};
  }

  &[type="search"],
  &.#{$ns}-round {
    border-radius: calc(var(--bp-surface-spacing) * 7.5);
    // override normalize.css
    box-sizing: border-box;
    padding-left: calc(var(--bp-surface-spacing) * 2);
  }

  &[readonly] {
    box-shadow: inset 0 0 0 1px var(--bp-surface-border-color-default);

    &:focus {
      box-shadow:
        inset 0 0 0 1px
          #{"oklch(from var(--bp-intent-primary-rest) calc(l - 0.074) calc(c - 0.018) h / 0.752)"},
        0 0 0 1px
          #{"oklch(from var(--bp-intent-primary-rest) calc(l - 0.074) calc(c - 0.018) h / 0.752)"},
        inset 0 0 0 1px #{oklch(from var(--bp-palette-black) l c h / 0.2)},
        inset 0 1px 1px #{oklch(from var(--bp-palette-black) l c h / 0.3)};
    }
  }

  &:disabled,
  &.#{$ns}-disabled {
    @include pt-input-disabled;
  }

  @media (forced-colors: active) and (prefers-color-scheme: dark) {
    border: 1px solid $pt-high-contrast-mode-border-color;
  }
}

@mixin pt-input-placeholder() {
  &::placeholder {
    color: var(--bp-typography-color-muted);
    // normalize.css sets an opacity less than 1, we don't want this
    opacity: 1;
  }
}

@mixin pt-input-disabled() {
  background: #{"oklch(from var(--bp-intent-default-disabled) calc(l + 0.2) calc(c - 0.015) h / 0.5)"};
  box-shadow: none;
  color: var(--bp-typography-color-default-disabled);
  cursor: not-allowed;
  resize: none;

  &::placeholder {
    color: var(--bp-typography-color-default-disabled);
  }
}

@mixin pt-input-large() {
  font-size: var(--bp-typography-size-body-large);
  height: calc(var(--bp-surface-spacing) * 10);
  line-height: calc(var(--bp-typography-line-height-default) * 10);

  &[type="search"],
  &.#{$ns}-round {
    padding: 0 calc(var(--bp-surface-spacing) * 3);
  }
}

@mixin pt-input-small() {
  font-size: var(--bp-typography-size-body-small);
  height: calc(var(--bp-surface-spacing) * 6);
  line-height: calc(var(--bp-surface-spacing) * 6);
  padding-left: calc(var(--bp-surface-spacing) * 2);
  padding-right: calc(var(--bp-surface-spacing) * 2);

  &[type="search"],
  &.#{$ns}-round {
    padding: 0 calc(var(--bp-surface-spacing) * 3);
  }
}

@mixin pt-dark-input-disabled() {
  background: #{oklch(from var(--bp-intent-default-hover) l c h / 0.5)};
  box-shadow: none;
  color: var(--bp-typography-color-default-disabled);
}

@mixin pt-dark-input-placeholder() {
  &::placeholder {
    color: #{"oklch(from var(--bp-typography-color-muted) calc(l + 0.24) calc(c - 0.011) h)"};
  }
}

@mixin pt-dark-input() {
  @include pt-dark-input-placeholder;
  background: #{oklch(from var(--bp-palette-black) l c h / 0.3)};

  box-shadow:
    inset 0 0 0 0
      #{"oklch(from var(--bp-intent-primary-rest) calc(l + 0.224) calc(c - 0.053) h / 0)"},
    0 0 0 0 #{"oklch(from var(--bp-intent-primary-rest) calc(l + 0.224) calc(c - 0.053) h / 0)"},
    inset 0 0 0 1px #{oklch(from var(--bp-palette-white) l c h / 0.2)},
    inset 0 -1px 1px 0 #{oklch(from var(--bp-palette-white) l c h / 0.3)};
  color: #{"oklch(from var(--bp-typography-color-default-rest) calc(l + 0.239) calc(c - 0.011) h)"};

  &:focus {
    box-shadow:
      inset 0 0 0 1px
        #{"oklch(from var(--bp-intent-primary-rest) calc(l + 0.224) calc(c - 0.053) h / 0.752)"},
      0 0 0 1px
        #{"oklch(from var(--bp-intent-primary-rest) calc(l + 0.224) calc(c - 0.053) h / 0.752)"};
  }

  &[readonly] {
    box-shadow: inset 0 0 0 1px #{oklch(from var(--bp-palette-black) l c h / 0.4)};

    &:focus {
      box-shadow:
        inset 0 0 0 1px
          #{"oklch(from var(--bp-intent-primary-rest) calc(l + 0.224) calc(c - 0.053) h / 0.752)"},
        0 0 0 1px
          #{"oklch(from var(--bp-intent-primary-rest) calc(l + 0.224) calc(c - 0.053) h / 0.752)"};
    }
  }

  &:disabled,
  &.#{$ns}-disabled {
    @include pt-dark-input-disabled;
  }
}

@mixin pt-input-intent($color) {
  box-shadow:
    inset 0 0 0 0 #{oklch(from $color l c h / 0)},
    0 0 0 0 #{oklch(from $color l c h / 0)},
    inset 0 0 0 1px $color,
    inset 0 1px 1px #{oklch(from var(--bp-palette-black) l c h / 0.3)};

  &:focus {
    box-shadow:
      inset 0 0 0 1px #{oklch(from $color l c h / 0.752)},
      0 0 0 calc(var(--bp-surface-spacing) * 0.5) #{oklch(from $color l c h / 0.752)},
      inset 0 1px 1px #{oklch(from var(--bp-palette-black) l c h / 0.2)};
  }

  &[readonly] {
    box-shadow: inset 0 0 0 1px $color;
  }

  &:disabled,
  &.#{$ns}-disabled {
    box-shadow: none;
  }
}

@mixin pt-dark-input-intent($color) {
  box-shadow:
    inset 0 0 0 0 #{oklch(from $color l c h / 0)},
    0 0 0 0 #{oklch(from $color l c h / 0)},
    inset 0 0 0 1px $color,
    inset 0 0 0 1px #{oklch(from var(--bp-palette-white) l c h / 0.2)},
    inset 0 -1px 1px 0 #{oklch(from var(--bp-palette-white) l c h / 0.3)};

  &:focus {
    box-shadow:
      inset 0 0 0 1px #{oklch(from $color l c h / 0.752)},
      0 0 0 calc(var(--bp-surface-spacing) * 0.5) #{oklch(from $color l c h / 0.752)},
      inset 0 0 0 1px #{oklch(from var(--bp-palette-white) l c h / 0.2)},
      inset 0 -1px 1px 0 #{oklch(from var(--bp-palette-white) l c h / 0.3)};
  }

  &[readonly] {
    box-shadow: inset 0 0 0 1px $color;
  }

  &:disabled,
  &.#{$ns}-disabled {
    box-shadow: none;
  }
}