.mobile-nav .search{
  padding: 10px;
}
.search {
  $compressed-width: 120px;
  $expanded-width: 200px;

  position: relative;
  .search-field {
    color: #4a4444;
    font-size: 14px;
    padding: 4px 12px;
    line-height: 1.3;
    border-radius: 20px;
    border: 0px;
    width: $expanded-width;
    transition: 0.2s all;
    -webkit-appearance: textfield;
    background: white;
    &:focus {
      outline: none;
    }
    .white-background &{
      border: 1px solid #ddd;  
    }
  }
  &.empty {
    .search-field {
      width: $compressed-width;
      background: white(0.1);
      &:focus {
        background: white;
        width: $expanded-width;
      }
    }
  }
}