@use 'scss/variables';

.suggestions {
  @extend %basic;

  text-align: left;
  border-top-width: 0;
  list-style: none;
  overflow: hidden;
  position: relative;
  display: inline-block;
  opacity: 1;
  margin-top: 5px;

  div {
    padding: 0.5rem 0.5rem 0.5rem 20px;
    font-size: 0.6em;

    &:hover {
      background-color: rgb(255 255 255 / 80%);
      cursor: pointer;
    }
  }
}

.searchBar {
  input[type='text']:focus + .suggestions {
    opacity: 1;
  }
}

.dark .suggestions {
  background: rgb(0 0 0 / 70%);
  color: white;

  li {
    &:hover {
      background: rgb(0 0 0 / 70%);
    }
  }
}

.micActive {
  box-shadow: 0 0 50px 1px #e74c3c !important;
}
