@use "sass:math";
@use "../theme";

.searchInput {
  flex-flow: row nowrap;
  gap: theme.spacing(2);
  position: relative;
  display: inline-block;
  width: calc(theme.spacing(1) * var(--width));
  color: theme.color("button", "outline", "foreground");

  .input {
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 1px solid theme.color("border");
    background-color: theme.color("background", "primary");
    transition-property: border-color, outline-color, background-color, color;
    transition-duration: 100ms;
    transition-timing-function: linear;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    caret-color: theme.color("focus");
    outline: theme.spacing(1) solid transparent;
    outline-offset: 0;

    &::-webkit-search-cancel-button {
      display: none;
    }

    &[data-hovered] {
      border-color: theme.color("forms", "input", "hover", "border");
    }

    &[data-focused] {
      border-color: theme.color("focus");
      outline-color: theme.color("focus-dim");
    }

    &::placeholder {
      color: theme.color("button", "disabled", "foreground");
    }
  }

  .clearButton {
    background: transparent;
    border: none;
    opacity: 1;
    display: inline;
    cursor: pointer;
  }

  .loadingIcon {
    opacity: 0;

    @include theme.spin;
  }

  .searchIcon,
  .loadingIcon {
    pointer-events: none;
  }

  .searchIcon,
  .loadingIcon,
  .clearButton {
    position: absolute;
    transition-property: opacity, color;
    transition-duration: 100ms;
    transition-timing-function: linear;
  }

  &[data-pending] {
    .loadingIcon {
      opacity: 1;
    }

    .searchIcon {
      opacity: 0;
    }
  }

  &[data-empty] {
    .clearButton {
      opacity: 0;
      pointer-events: none;
    }
  }

  @each $size, $values in theme.$button-sizes {
    &[data-size="#{$size}"] {
      $padding: theme.map-get-strict($values, "padding");
      $icon-size: theme.map-get-strict($values, "icon-size");
      $gap: theme.map-get-strict($values, "gap");
      $height: theme.map-get-strict($values, "height");

      height: $height;

      .input {
        border-radius: theme.map-get-strict($values, "border-radius");
        font-size: theme.map-get-strict($values, "font-size");
        line-height: $height;
        padding: 0 ($padding + $icon-size + $gap);
      }

      .searchIcon,
      .loadingIcon,
      .clearButton {
        inset: math.div($height - $icon-size, 2) auto;
      }

      .searchIcon,
      .loadingIcon,
      .clearIcon {
        width: $icon-size;
        height: $icon-size;
      }

      .searchIcon,
      .loadingIcon {
        left: $padding;
      }

      .clearButton {
        right: $padding;
      }
    }
  }

  &[data-disabled] {
    color: theme.color("button", "disabled", "foreground");

    .input {
      cursor: not-allowed;
      background-color: theme.color("button", "disabled", "background");
      border-color: transparent;
    }

    .clearButton {
      pointer-events: none;
    }
  }
}