/**
 * Search form layout (.lgs). Visual chrome lives in the theme
 * (css/layout/searchbar.css).
 */

.lgs {
  display: block;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.lgs *,
.lgs *::before,
.lgs *::after {
  box-sizing: border-box;
}

.lgs-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
}

.lgs-bar .form-item,
.lgs-bar .js-form-item {
  margin: 0;
  flex: 1 1 10rem;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.lgs-bar .form-item--text,
.lgs-bar .js-form-type-textfield {
  flex: 2 1 12rem;
}

.lgs-bar .wrapper-selectify,
.lgs-bar .claro-autocomplete {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.lgs-bar label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lgs-bar .form-actions,
.lgs-bar .js-form-wrapper.form-actions {
  margin: 0;
  display: flex;
  align-items: stretch;
}

.lgs-bar .form-actions .button,
.lgs-bar .lgs-submit,
.lgs-bar input[type="submit"],
.lgs-bar button[type="submit"] {
  width: 100%;
}

@media (max-width: 45rem) {
  .lgs-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .lgs-bar .form-item,
  .lgs-bar .js-form-item,
  .lgs-bar .form-actions,
  .lgs-bar .form-actions .button,
  .lgs-bar input[type="submit"],
  .lgs-bar button[type="submit"] {
    flex: 1 1 auto;
    width: 100%;
  }
}