@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: rgba(255, 255, 255, 0.8);
      cursor: pointer;
    }
  }
}

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

.dark .suggestions {
  background: rgba(0, 0, 0, 0.7);
  color: white;

  li {
    &:hover {
      background: rgba(0, 0, 0, 0.7);
    }
  }
}

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