diff --git a/src/app/search-page/search.component.html b/src/app/search-page/search.component.html
index 7825920d16..3489cccdfb 100644
--- a/src/app/search-page/search.component.html
+++ b/src/app/search-page/search.component.html
@@ -52,7 +52,7 @@
[searchPlaceholder]="'search.search-form.placeholder' | translate">
-
diff --git a/src/app/shared/search-form/search-form.component.scss b/src/app/shared/search-form/search-form.component.scss
index 1e8f784fc3..cf3a354364 100644
--- a/src/app/shared/search-form/search-form.component.scss
+++ b/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);
}
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 657737cc58..b5e5cd6f25 100644
--- a/src/styles/_custom_variables.scss
+++ b/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;
}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 41a8e11334..badc159747 100644
--- a/src/styles/_variables.scss
+++ b/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;