.search-form {
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--neutral-300);
  padding: 4px;
  display: flex;
  gap: 10px;
  box-shadow: 0 0 0 0px transparent;
  transition: box-shadow 0.3s cubic-bezier(.2, .9, .3, 1);
  justify-content: space-between;

  &:focus,
  &:focus-within {
    box-shadow: 0 0 0 2px var(--neutral-800);
    border: 1px solid var(--neutral-800);
  }

  .search-field {
    border: 0;
    outline: 0;
    height: 100%;
    margin-left: 16px;
  }

  .search-submit {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    padding: 10px;
    border: none;
    cursor: pointer;
    background: var(--brand-primary) url('../../images/search-icon.svg') no-repeat;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 18px;
    color: transparent;
  }
}