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

@import "../../common/variables";
@import "../../common/variables-extended";
@import "../button/common";

// 3px space between small button and regular input
$input-button-height: $pt-button-height-small !default;
// 5px space between regular button and large input
$input-button-height-large: $pt-button-height !default;
// 1px space between regular button and small input
$input-button-height-small: $pt-button-height-smaller !default;

.#{$ns}-input-group {
  display: block;
  position: relative;

  .#{$ns}-input {
    // explicit position prevents shadow clipping https://github.com/palantir/blueprint/pull/490#issuecomment-273342170
    position: relative;
    width: 100%;

    // add space if there's something before or after the input
    &:not(:first-child) {
      padding-left: calc(var(--bp-surface-spacing) * 7.5);
    }

    &:not(:last-child) {
      padding-right: calc(var(--bp-surface-spacing) * 7.5);
    }
  }

  .#{$ns}-input-action,
  > .#{$ns}-input-left-container,
  > .#{$ns}-button,
  > .#{$ns}-icon {
    position: absolute;
    top: 0;

    // glue it to the end it appears on
    &:first-child {
      left: 0;
    }

    &:last-child {
      right: 0;
    }
  }

  .#{$ns}-button {
    @include pt-button-height(calc(var(--bp-surface-spacing) * 6));
    margin: calc(var(--bp-surface-spacing) * 0.75);
    padding: 0 calc(var(--bp-surface-spacing) * 2);

    // icons CSS API support
    &:empty {
      padding: 0;
    }
  }

  // bump icon or left content up so it sits above input
  > .#{$ns}-input-left-container,
  > .#{$ns}-icon {
    z-index: 1;
  }

  // direct descendant to exclude icons in buttons
  > .#{$ns}-input-left-container > .#{$ns}-icon,
  > .#{$ns}-icon {
    color: var(--bp-typography-color-muted);

    &:empty {
      @include pt-icon($pt-icon-size-standard);
    }
  }

  // adjusting the margin of spinners in input groups
  // we have to avoid targetting buttons that contain a spinner
  > .#{$ns}-input-left-container > .#{$ns}-icon,
  > .#{$ns}-icon,
  .#{$ns}-input-action > .#{$ns}-spinner {
    margin: calc(var(--bp-surface-spacing) * 1.75);
  }

  .#{$ns}-tag {
    margin: calc(var(--bp-surface-spacing) * 1.25);
  }

  // all buttons go gray in default state and assume their native colors only when hovered
  // or when input is focused. this prevents distracting colors in the UI.
  .#{$ns}-input:not(:focus) + .#{$ns}-button,
  .#{$ns}-input:not(:focus) + .#{$ns}-input-action .#{$ns}-button {
    &.#{$ns}-minimal:not(:hover):not(:focus) {
      color: var(--bp-typography-color-muted);

      // same goes for dark
      /* stylelint-disable-next-line selector-max-compound-selectors */
      .#{$ns}-dark & {
        color: #{"oklch(from var(--bp-typography-color-muted) calc(l + 0.24) calc(c - 0.011) h)"};
      }

      #{$icon-classes} {
        color: var(--bp-typography-color-muted);
      }
    }

    &.#{$ns}-minimal:disabled {
      // override more specific selector above
      /* stylelint-disable declaration-no-important */
      color: var(--bp-typography-color-default-disabled) !important;

      #{$icon-classes} {
        color: var(--bp-typography-color-default-disabled) !important;
      }
    }
  }

  // this class echoes `input:disabled` on the child input, but each action must individually be disabled
  &.#{$ns}-disabled {
    // note that enabled buttons inside this input group are still clickable
    cursor: not-allowed;

    .#{$ns}-icon {
      color: var(--bp-typography-color-default-disabled);
    }
  }

  &.#{$ns}-large {
    .#{$ns}-button {
      @include pt-button-height(calc(var(--bp-surface-spacing) * 7.5));
      margin: calc(var(--bp-surface-spacing) * 1.25);
    }

    > .#{$ns}-input-left-container > .#{$ns}-icon,
    > .#{$ns}-icon,
    .#{$ns}-input-action > .#{$ns}-spinner {
      margin: calc(var(--bp-surface-spacing) * 3);
    }

    .#{$ns}-input {
      @include pt-input-large;

      &:not(:first-child) {
        padding-left: calc(var(--bp-surface-spacing) * 10);
      }

      &:not(:last-child) {
        padding-right: calc(var(--bp-surface-spacing) * 10);
      }
    }
  }

  &.#{$ns}-small {
    .#{$ns}-button {
      @include pt-button-height(calc(var(--bp-surface-spacing) * 5));
      margin: calc(var(--bp-surface-spacing) * 0.5);
    }

    .#{$ns}-tag {
      @include pt-button-height(calc(var(--bp-surface-spacing) * 5));
      margin: calc(var(--bp-surface-spacing) * 0.5);
    }

    > .#{$ns}-input-left-container > .#{$ns}-icon,
    > .#{$ns}-icon,
    .#{$ns}-input-action > .#{$ns}-spinner {
      margin: var(--bp-surface-spacing);
    }

    .#{$ns}-input {
      @include pt-input-small;

      &:not(:first-child) {
        padding-left: calc(var(--bp-surface-spacing) * 6);
      }

      &:not(:last-child) {
        padding-right: calc(var(--bp-surface-spacing) * 6);
      }
    }
  }

  &.#{$ns}-fill {
    flex: 1 1 auto;
    width: 100%;
  }

  &.#{$ns}-round {
    .#{$ns}-button,
    .#{$ns}-input,
    .#{$ns}-tag {
      border-radius: calc(var(--bp-surface-spacing) * 7.5);
    }
  }

  .#{$ns}-dark & {
    .#{$ns}-icon {
      color: #{"oklch(from var(--bp-typography-color-muted) calc(l + 0.24) calc(c - 0.011) h)"};
    }

    &.#{$ns}-disabled .#{$ns}-icon {
      color: var(--bp-typography-color-default-disabled);
    }
  }

  &.#{$ns}-intent-primary {
    .#{$ns}-input {
      @include pt-input-intent(var(--bp-intent-primary-rest));

      .#{$ns}-dark & {
        @include pt-dark-input-intent(
          #{"oklch(from var(--bp-intent-primary-rest) calc(l + 0.095) calc(c - 0.004) h)"}
        );
      }
    }

    > .#{$ns}-icon {
      color: var(--bp-intent-primary-hover);

      .#{$ns}-dark & {
        color: #{"oklch(from var(--bp-intent-primary-rest) calc(l + 0.22) calc(c - 0.02) h)"};
      }
    }
  }

  &.#{$ns}-intent-success {
    .#{$ns}-input {
      @include pt-input-intent(var(--bp-intent-success-rest));

      .#{$ns}-dark & {
        @include pt-dark-input-intent(
          #{"oklch(from var(--bp-intent-success-rest) calc(l + 0.092) calc(c + 0.016) h)"}
        );
      }
    }

    > .#{$ns}-icon {
      color: var(--bp-intent-success-hover);

      .#{$ns}-dark & {
        color: #{"oklch(from var(--bp-intent-success-rest) calc(l + 0.25) calc(c - 0.03) h)"};
      }
    }
  }

  &.#{$ns}-intent-warning {
    .#{$ns}-input {
      @include pt-input-intent(var(--bp-intent-warning-rest));

      .#{$ns}-dark & {
        @include pt-dark-input-intent(
          #{"oklch(from var(--bp-intent-warning-rest) calc(l + 0.111) calc(c + 0.004) h)"}
        );
      }
    }

    > .#{$ns}-icon {
      color: var(--bp-intent-warning-hover);

      .#{$ns}-dark & {
        color: #{"oklch(from var(--bp-intent-warning-rest) calc(l + 0.18) calc(c - 0.02) h)"};
      }
    }
  }

  &.#{$ns}-intent-danger {
    .#{$ns}-input {
      @include pt-input-intent(var(--bp-intent-danger-rest));

      .#{$ns}-dark & {
        @include pt-dark-input-intent(
          #{"oklch(from var(--bp-intent-danger-rest) calc(l + 0.098) calc(c - 0.02) h)"}
        );
      }
    }

    > .#{$ns}-icon {
      color: var(--bp-intent-danger-hover);

      .#{$ns}-dark & {
        color: #{"oklch(from var(--bp-intent-danger-rest) calc(l + 0.2) calc(c - 0.02) h)"};
      }
    }
  }
}