@import '../../../../styles/common';
@import '../../variables';

$icon-size: rem(20px);
$input-height: rem(34px);
$clear-button-width: $icon-size + spacing();

$stacking-order: (
  backdrop: 1,
  input: 2,
  icon: 3,
  action: 3,
);

.SearchField {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  border: 1px solid transparent;
  width: 100%;
  max-width: rem(694px);
}

// We have both a focused class and a focus pseudo selector here
// because we allow "faked" focus for when the search is still
// active, but is not actually the focused element in the DOM
// (for example, while selecting a value from a filter in the
// search this input controls)
.focused .Input,
.Input:focus {
  border: none;
  color: color('ink');

  &::placeholder {
    color: color('ink', 'lightest');
  }
}

.Input:focus {
  ~ .Backdrop {
    background-color: color('white');
  }

  ~ .Icon {
    @include recolor-icon(color('ink', 'lightest'));
  }
}

.focused {
  .Backdrop {
    background-color: color('white');
  }

  .Icon {
    @include recolor-icon(color('ink', 'lightest'));
  }
}

.Input {
  @include text-style-input;
  z-index: z-index(input, $stacking-order);
  width: calc(100% - #{$clear-button-width});
  height: $input-height;
  padding: 0 0 0 $clear-button-width;
  border: none;
  background-color: transparent;
  outline: none;
  color: var(--top-bar-color);
  will-change: fill, color;
  transition: fill duration() easing(), color duration() easing();
  appearance: textfield;

  &::placeholder {
    color: var(--top-bar-color);
  }

  &::-webkit-search-decoration,
  &::-webkit-search-cancel-button {
    appearance: none;
  }
}

.Icon {
  @include recolor-icon(var(--top-bar-color));
  position: absolute;
  z-index: z-index(icon, $stacking-order);
  top: 50%;
  left: spacing(tight);
  display: flex;
  height: $icon-size;
  pointer-events: none;
  transform: translateY(-50%);
}

.Clear {
  @include recolor-icon(color('ink', 'lightest'));
  position: relative;
  z-index: z-index(action, $stacking-order);
  align-self: stretch;
  border: none;
  appearance: none;
  background: transparent;
  width: $clear-button-width;

  &:focus,
  &:hover {
    @include recolor-icon(color('ink', 'lighter'));
    outline: none;
  }
}

.Backdrop {
  position: absolute;
  z-index: z-index(backdrop, $stacking-order);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--top-bar-background-lighter);
  will-change: background-color;
  transition: background-color duration() easing();
  border-radius: border-radius();
  animation: toLightBackground 0.01ms;
}

@keyframes toLightBackground {
  to {
    background-color: var(--top-bar-background-lighter);
  }
}
