changed scope with to css variable and removed the search label alignment

src/app/search-page/search.component.html

@@ -52,7 +52,7 @@
                     [searchPlaceholder]="'search.search-form.placeholder' | translate">
     </ds-search-form>
     <div class="row mb-3 mb-md-1">
-        <div class="labels col-sm-9 offset-sm-3">
+        <div class="labels col-sm-9">
             <ds-search-labels *ngIf="searchEnabled" [inPlaceSearch]="inPlaceSearch"></ds-search-labels>
         </div>
     </div>

src/app/shared/search-form/search-form.component.scss

@@ -5,5 +5,5 @@
 }
 
 .scope-button {
-  max-width: $search-form-scope-max-width;
+  max-width: var(--ds-search-form-scope-max-width);
 }

src/styles/_custom_variables.scss

@@ -82,4 +82,6 @@
 
   --ds-slider-color: #{$green};
   --ds-slider-handle-width: 18px;
+
+  --ds-search-form-scope-max-width: 150px;
 }

src/styles/_variables.scss

@@ -3,5 +3,3 @@
 
 @import '_bootstrap_variables.scss';
 @import '../../node_modules/bootstrap/scss/variables.scss';
-
-$search-form-scope-max-width: 150px;