$background-gray: rgb(240, 242, 245);

.search-result {
  border-bottom: 1px solid gray;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  width: 195px;
  height: 20px;
  padding: 5px;
  background-color: white;
  cursor: pointer;
}

.search-control input:focus {
  outline-width: 0;
}

.search-component {
  margin: 0.3rem 0rem;
  min-width: 320px;

  input:focus {
    box-shadow: none;
  }
}

.lighter-gray {
  color: gainsboro;
}

.rm-search-trashbin {
  display: none;
  margin-left: 1em;
}

// inspired from https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
  .search-component {
    margin: inherit;
    min-width: 550px;

    input:focus {
      box-shadow: none;
    }
  }
}

@media (min-width: 1250px) {
  .search-component {
    margin: inherit;
    min-width: 720px;

    input:focus {
      box-shadow: none;
    }
  }

  .rm-search-trashbin {
    display: inherit;
    margin-left: 3rem;
    &:hover {
      color: red;
      font-weight: bolder;
    }
  }
}

@media (min-width: 1600px) {
  .search-component {
    margin: inherit;
    min-width: 850px;

    input:focus {
      box-shadow: none;
    }
  }
}

.focused {
  background-color: #007bff;
  border-color: #007bff;
  color: white;
  cursor: pointer;
}

.search-domain-select {
  float: right;
  margin-top: 0.5rem;
}

.search-domain-selection {
  border-radius: 2px;
  font-size: 0.78rem;
}

.my-snippets-selection {
  background-color: #282a36; //same color as dracula background for highlight.js
  color: white;
}

.my-notes-selection {
  background-color: lightgoldenrodyellow;
}

.public-snippets-selection {
  background-color: darkgray; //same color as dracula background for highlight.js
  color: white;
}

.my-snippets-selection-unchecked {
  color: #282a36;
}

.public-snippets-selection-unchecked {
  color: darkgray;
}

.my-bookmarks-selection {
  background-color: linen;
}

.my-bookmarks-selection-unchecked {
  color: linen;
}

.my-notes-selection-unchecked {
  color: lightgoldenrodyellow;
}

//overwrite bootsrap's class for local usage only
.dropdown-item {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

// the search bar border color to be the same as the bootstrap buttons surrounding it
input {
  border-color: #6c757d;
  background-color: $background-gray;
}

.unchecked-public-bookmarks-selection {
  color: $background-gray;
}

.search-history-clock {
  color: #6c757d;
  font-size: 0.9rem;
}

.search-history-text {
  color: #52188c;
  font-size: 1.05rem;
}

mat-option {
  justify-content: space-between;
}
