.form-control,
.form-select {
  &:focus-visible,
  &:focus {
    border-color: var(--stanford-black);
    box-shadow: 0 0 0 2px var(--stanford-black);
    outline: none;
  }
}

.search-query-form {
  --search-q-border: 1px solid var(--stanford-40-black);
  --svg-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='currentColor' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");

  border: 1px solid var(--search-q-border);
  padding: 0.5rem;
  border-radius: 0.25rem;
  background-color: var(--bs-body-bg);
  width: 100%; /* overrides https://github.com/projectblacklight/blacklight/blob/69373f202753f04ec6aca179fdf8fa01248a9edf/app/assets/stylesheets/blacklight/_header.scss#L32 */

  @media (width >= 576px) {
    .input-group {
      &::before {
        content: "";
        height: 2rem;
        width: 1.5rem;
        margin-left: 0.5rem;
        margin-top: 0.125rem;
        background: var(--svg-search-icon) no-repeat left;
      }
    }
  }

  .input-group {
    container-type: inline-size;

    input::placeholder {
      font-style: italic;
    }
  }

  .search-btn {
    border-radius: 0.25rem !important;
    padding: 2px 6px;
    align-items: center;

    .submit-search-text {
      display: none;
    }

    &::before {
      content: " ";
      display: inline-block;
      background-color: var(--bs-btn-color);
      height: 1.5rem;
      width: 1.3rem;
      mask: var(--svg-search-icon) no-repeat;
      mask-position: center 4px;
    }

    @media (width >= 576px) {
      .submit-search-text {
        display: inline;
      }

      &::before {
        display: none;
      }
    }
  }

  .search-field {
    display: none;
    width: 7rem;

    --bs-border-width: 0;

    margin-right: 1px;

    @media (width >= 576px) {
      display: block;
    }
  }

  .search-q {
    border: 1px solid transparent;
    border-inline-start: none;
    flex-grow: 4;
    outline: none;

    @media (width >= 576px) {
      border-inline-start: var(--search-q-border);
    }
  }
}

.toggle-radio {
  legend {
    font-size: var(--bs-body-font-size);
  }

  .btn-group {
    .btn {
      --bs-border-radius: 2rem;
      --bs-btn-active-bg: var(--stanford-digital-blue);
      --bs-btn-active-color: var(--bs-body-bg);
      --bs-btn-bg: var(--bs-body-bg);
      --bs-btn-color: var(--stanford-digital-blue);
      --bs-btn-hover-bg: var(--stanford-digital-blue-dark);
      --bs-btn-hover-color: var(--bs-body-bg);
      --bs-btn-padding-x: 1rem;
      --bs-btn-padding-y: 0.375rem;
      --btn-hover-decoration: none;

      &:hover {
        background-color: var(--bs-btn-hover-bg);
        color: var(--bs-btn-hover-color);
      }
    }

    .btn-check:first-child + .btn {
      border-top-left-radius: var(--bs-border-radius);
      border-bottom-left-radius: var(--bs-border-radius);
    }

    .btn-check:disabled + .btn {
      --bs-btn-color: var(--stanford-50-black);
      --bs-btn-active-bg: var(--stanford-50-black);
      --bs-btn-active-border-color: var(--stanford-50-black);
      --bs-btn-border-color: var(--stanford-50-black);

      opacity: 1;
    }

    .btn-check:focus-visible + .btn {
      outline: 2px solid black;
      outline-offset: 2px;
    }
  }
}