@import (less) "../variables.less";

.wrapper {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  font-family: @sans;

  img {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
  }
}

.icon {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background-color: #666;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
}

.input {
  border: none;
  min-width: 300px;
  width: 100%;
  height: 40px;
  padding: 10px 10px 10px 40px;
  font-family: @sans;
  border: 1px solid transparent;

  &:focus {
    outline: none !important;
    border: 1px dotted #666;
  }
}

.results-wrapper {
  position: absolute;
  width: 100%;
  background: white;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
  z-index:1;
}

.result {
  padding: 10px;
  font-size: 14px;
  cursor: pointer;

  &:hover {
    background-color: #eee;
  }

  &.active {
    background-color: #ddd;
  }
}

// Need to make these pointer-events: none so that the result receives the click and we can get the index
.name {
  font-weight: 700;
  pointer-events: none;
}

.details {
  pointer-events: none;
}

.button {
  width: 100%;
  text-align: left;
  padding: 0;
  background: transparent;
  border: none;
  pointer-events: none;
}