@use "variables";

.fwe-search-input {
  display: block;
  position: relative;
  .fwe-search-icon {
    height: 16px;
    width: 16px;

    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxNnYxNkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PGcgZmlsbD0iIzMzMyIgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBkPSJNMTAgMmE0IDQgMCAxIDEtNCA0IDQuMDA0IDQuMDA0IDAgMCAxIDQtNG0wLTFhNSA1IDAgMSAwIDUgNSA1LjAwNiA1LjAwNiAwIDAgMC01LTVaTTEuMjkzIDEzLjI5M2wzLjgyMi0zLjgyMmE2LjA0MyA2LjA0MyAwIDAgMCAxLjQxNCAxLjQxNGwtMy44MjIgMy44MjJhMSAxIDAgMCAxLTEuNDE0LTEuNDE0WiIvPjwvZz48L3N2Zz4=");
    position: absolute;
    line-height: 1;
    left: 0px;
    bottom: 8px;
  }
  .fwe-clear-icon {
    height: 16px;
    width: 16px;
    &::after {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iY29udGVudCIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDE2djE2SDB6IiBkYXRhLW5hbWU9ImFiYjU1YWU4LWNhNTUtNDcwYy04N2MzLTRiMDY3MzhiNDM2MCIvPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Ik0xMC4yNCA1LjA1IDggNy4zIDUuNzUgNS4wNWwtLjcuNzFMNy4yOSA4bC0yLjI0IDIuMjUuNy43TDggOC43MWwyLjI0IDIuMjQuNzEtLjdMOC43IDhsMi4yNS0yLjI0LS43MS0uNzF6IiBkYXRhLW5hbWU9ImI2NGIxZWQyLWI4MzEtNDM1Yy05Y2VlLWI5OTY0MjYwMjA5ZCIvPjwvc3ZnPg==");
    }

    cursor: pointer;
    position: absolute;
    right: 0px;
    bottom: 9px;
    line-height: 1;
    background: variables.$control;
    border-radius: 50%;
    &:hover {
      background: variables.$control-hover;
    }
    &:active {
      background: variables.$control-active;
    }
  }

  input {
    width: 100%;
    border-left: none;
    border-top: none;
    border-right: none;
    border-radius: 0px;
    border-bottom: 1px solid variables.$control-border;
    background: transparent;
    padding: 1px 24px 4px 32px;
    &::placeholder {
      color: variables.$text;
    }
    &:hover:not(:disabled) {
      &::placeholder {
        color: variables.$hero;
      }
      border-bottom: 1px solid variables.$hero;
    }
    &:focus {
      outline: none;
      border-bottom: 1px solid variables.$hero;
      &::placeholder {
        color: transparent !important;
      }
    }
    &:placeholder-shown ~ .fwe-clear-icon {
      display: none;
    }
    &:disabled {
      opacity: 0.5;
      & ~ .fwe-clear-icon,
      & ~ .fwe-search-icon {
        opacity: 0.5;
      }
    }
  }
}

input[type="search"]::-webkit-search-cancel-button {
  /* Remove default */
  -webkit-appearance: none;
}

.fwe-search-suggestions {
  position: absolute;
  z-index: variables.$zindex-dropdown;
  top: 38px;
  left: 0px;
  right: 0px;
  padding: 8px;
  background: variables.$white;
  border-radius: variables.$control-border-radius;
  box-shadow: variables.$control-box-shadow;
  .fwe-search-suggestion {
    cursor: pointer;
    padding: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    strong {
      font-weight: unset;
      color: variables.$hero;
    }
    &:hover,
    &.fwe-selected {
      background: variables.$background;
    }
  }
}