.form-search {
  position: relative;
}

.form-search input[type=search] {
  appearance: none;
  &::-ms-clear { display: none; width : 0; height: 0; }
  &::-ms-reveal { display: none; width : 0; height: 0; }
  &::-webkit-search-decoration,
  &::-webkit-search-cancel-button,
  &::-webkit-search-results-button,
  &::-webkit-search-results-decoration { display: none; }
}

.form-search.inverted input {
  color: $white;
  border-color: $primary;
  background-color: transparent;
}

.form-search .btn-clear,
.form-search .btn-submit {
  position: absolute;
  justify-content: center;
  width: $btn-height;
  top: 0;
  padding-left: $spacing-xxs;
  padding-right: $spacing-xxs;
  border-radius: 0;
  &::before {
    content: "";
    display: inline-block;
    width: $icon;
    height: $icon;
    mask-repeat: no-repeat;
    background-color: $primary;
  }
  &:hover::before, &:focus::before {
    background-color: $white;
  }
  &:last-child {
    border-top-right-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
  }
}

.form-search .btn-clear {
  right: $btn-height;
}

.form-search .btn-clear::before {
  mask-image: url("@images/cross.svg");
}

.form-search .btn-submit {
  right: 0;
  background-color: $primary;
  &::before {
    background-color: $white;
  }
  &:hover, &:focus {
    background-color: $link-hover-color;
  }
}

.form-search .btn-submit::before {
  mask-image: url("@images/search.svg");
}

.form-search.direct-input {
  &::before {
    content: "";
    position: absolute;
    display: inline-block;
    width: $icon;
    height: $icon;
    top: $spacing-xs;
    left: $spacing-xs;
    mask-image: url("@images/search.svg");
    mask-repeat: no-repeat;
    background-color: $gray;
  }
  .form-control {
    padding-left: $spacing-md*2;
    padding-right: $spacing-lg;
  }
  .btn-clear {
    right: 0;
  }
}


// Header site search — positions the popover below the trigger button

#site-search {
  position: relative;

  summary { list-style: none; }
  summary::-webkit-details-marker { display: none; }

  .popover-menu.search {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: $zindex-dropdown;
    margin-top: $spacing-xxs;
  }
}


// Search popover

.popover-menu.search, 
.dropdown-menu.search {
  width: $popover-search-width;
  background-color: $petrol-dark;
  input {
    border: none;
  }
  .btn {
    border-radius: $border-radius;
  }
}

.popover-menu .list-searchresults,
.dropdown-menu .list-searchresults {
  overflow-y: scroll;
  margin-top: $spacing-xs;
  padding: $popover-padding;
  padding-top: $spacing-xs;
  border-top: $border-width solid $black;
  max-height: 500px;
  color: $white;
  &::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
}

.popover-menu .list-searchresults .issue-item,
.dropdown-menu .list-searchresults .issue-item {
  margin-top: $spacing-xs;
}

.popover-menu .issue-item .issue-title,
.dropdown-menu .issue-title {
  color: $white;
}

.popover-menu .issue-info,
.dropdown-menu .issue-info {
  color: $label-color-inverted;
}