input[type="text"] {
  margin-top: calc(-0.3 * var(--bs-font-size-base));
  background-color: #fff !important;
  border-color: var(--ds-header-icon-color);
  right: 0;

  &.collapsed {
    opacity: 0;
  }
}

.submit-icon {
  cursor: pointer;
  position: sticky;
  top: 0;
  border: 0 !important;

  color: var(--ds-header-icon-color);
  &:hover, &:focus {
    color: var(--ds-header-icon-color-hover);
  }
}

@media screen and (max-width: map-get($grid-breakpoints, md)) {
  .query:focus {
    max-width: 250px !important;
    width: 40vw !important;
  }

}

