@import "styles/colors.scss";

form.search-form {
  width: 100%;
  flex: 1;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;

  .search-input-field {
    width: 100%;
  }

  & > label {
    display: flex;

    & svg {
      padding: 0 1em;
      box-sizing: content-box;
    }
  }

  & input {
    width: 100%;
    font-size: 20px;
    padding: 0.75em 0;
    border: 1px solid transparent;
  }
}

.search-with-google {
  display: flex;
  align-items: center;
  gap: 0.25em;

  & > span {
    display: flex;
    align-items: "center";
  }
}

.search-list {
  max-height: 500px;
  margin: 1em;
  display: flex;
  gap: 1em;
  flex-direction: column;
  overflow-y: scroll;
}

.search-item {
  width: 100%;
  padding: 0.3em 0.5em;
  border-radius: 5px;

  &.selected {
    background: $white;
  }

  & > a {
    width: 100%;
    border: 0;
    display: flex;
    gap: 0.5em;
    align-items: center;

    &:hover {
      border: 0;
    }
  }
}
