#searchbar {
  z-index: 3;
  position: fixed;
  top: calc(var(--control-space-top) + 36px);
  left: 0;
  width: 100%;
  background: #fff;
  color: #000;
  padding-left: var(--control-space-left);
  padding-right: calc(82px + var(--control-space-right));
  -webkit-user-select: none;
  max-height: calc(100% - 125px);
  overflow-y: auto;
}

body:not(.is-ntp) #searchbar,
body.ntp-has-background #searchbar {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 4px -2px;
}

/* account for menu button */
body.windows #searchbar,
body.linux #searchbar {
  padding-left: calc(36px + var(--control-space-left));
}

.searchbar-plugin-container {
  position: relative;
}

.searchbar-heading {
  font-weight: normal;
  padding: 0.9em 0.55em 0.33em 0.55em;
  opacity: 0.7;
  cursor: default;
}

.searchbar-floating-button {
  position: absolute;
  right: 0;
  top: 0.5em;
  border: 1px #ccc solid;
  padding: 0.33em 0.5em;
  border-radius: 3px;
  opacity: 0.66;
  z-index: 9;
}

.searchbar-floating-button:hover {
  background-color: rgba(0, 0, 0, 0.05)
}

.dark-theme .searchbar-floating-button {
  border-color: white;
}
.dark-theme .searchbar-floating-button:hover {
  background-color: rgba(255, 255, 255, 0.075)
}

/* move the icon when there isn't room to the left of the searchbar */

.fullscreen #searchbar .searchbar-item i,
body:not(.mac) #searchbar .searchbar-item i,
.fullscreen #searchbar .searchbar-item .icon-image,
body:not(.mac) #searchbar .searchbar-item .icon-image {
  left: auto;
  right: 1.1em;
}

/* if an action button is visible, the searchbar icon should disappear (if they occupy the same position) */

.fullscreen #searchbar .searchbar-item.has-action-button:hover i,
body:not(.mac) #searchbar .searchbar-item.has-action-button:hover i,
.fullscreen #searchbar .searchbar-item.has-action-button:hover .icon-image,
body:not(.mac) #searchbar .searchbar-item.has-action-button:hover .icon-image {
  display: none;
}

#searchbar .image.color-circle {
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  float: left;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding-right: 0.5em;
}
.dark-theme #searchbar .image.color-circle {
  border-color: rgba(255, 255, 255, 0.2);
}

.search-feedback-link {
  display: block;
  width: 100%;
  font-size: 0.8em;
  opacity: 0.75;
  text-decoration: underline;
  padding: 0.5em 0.6875em 0.5em 0.6875em;
}

.search-feedback-link:hover {
  opacity: 1;
  cursor: pointer;
}

.searchbar-shortcut {
  font-size: 1.05em !important;
  padding: 0.5em 0.66em;
  margin: 0.175em 0.4em 0.5em 0.4em;
  border-radius: 5px;
  border: 1px rgba(0, 0, 0, 0.15) solid;
}
.dark-theme .searchbar-shortcut {
  border-color: rgba(255, 255, 255, 0.4);
}

.searchbar-shortcut:hover,
.searchbar-shortcut:focus {
  background: rgba(0, 0, 0, 0.075);
}

.dark-theme .searchbar-shortcut:hover,
.dark-theme .searchbar-shortcut:focus {
  background: rgba(255, 255, 255, 0.075);
}

.searchbar-shortcut:active {
  background: rgba(0, 0, 0, 0.125);
}

.dark-theme .searchbar-shortcut:active {
  background: rgba(255, 255, 255, 0.125);
}
