dev/scss/header/searchbar.scss

@charset "utf-8";
@use "../util";
@use "../base/colors";
@use "../base/icons";
@use "../base/lengths";


/**
 * Search field
 */
#q-field {
  display:       block;
  margin-bottom: 3px;
  width:         100%;
  margin:        0;
  border-radius: 6px;

  &::-webkit-search-cancel-button {
    display: none;
  }

  &.loading {
    background: {
      color: colors.$light-orange;
      image: none;
    }
  }
}


#searchbar {
  position:      relative;
  width:         100%;
  padding:       0;
  // padding-right: $right-distance + $button-width;
  margin-top: 7pt;

  button[type=submit] {
    position: absolute;
    padding:  0;
    // right:    $right-distance;
    right: 0;

    &:not(.loading)::after {
      content: icons.$fa-search;
    }
  }
}

.query.panel {
  padding-right: lengths.$button-width;
}

// Specify result button group layout

.query.button-group.button-panel {
  display:        block;
  width:          auto;
  text-align:     right;
  vertical-align: top;
  line-height:    1.3em;

  > span {
    box-shadow: none;
  }
}