refactor(inputs): update invalid styles

SisIvanova · SisIvanova · commit 0d250dfbaa32 · 2025-07-22T10:38:23.000+03:00
diff --git a/src/components/combo/themes/shared/combo.common.scss b/src/components/combo/themes/shared/combo.common.scss
@@ -59,8 +59,8 @@ $dropdown-theme: dropdown-theme.$material;
     }
 }
 
-:host(:not([disabled])[invalid]),
-:host(:not(:disabled)[invalid]) {
+:host(:not([disabled]):state(ig-invalid)),
+:host(:not(:disabled):state(ig-invalid)) {
     ::part(helper-text) {
         color: var-get($theme, 'error-secondary-color');
     }
diff --git a/src/components/combo/themes/shared/combo.indigo.scss b/src/components/combo/themes/shared/combo.indigo.scss
@@ -92,8 +92,8 @@ $dropdown-theme: dropdown-theme.$indigo;
     }
 }
 
-:host(:not([disabled])[invalid]),
-:host(:not(:disabled)[invalid]) {
+:host(:not([disabled]):state(ig-invalid)),
+:host(:not(:disabled):state(ig-invalid)) {
     ::part(helper-text) {
         color: var-get($input-theme, 'helper-text-color');
     }
diff --git a/src/components/combo/themes/shared/combo.material.scss b/src/components/combo/themes/shared/combo.material.scss
@@ -131,10 +131,8 @@ $dropdown-theme: dropdown-theme.$material;
 }
 
 :host(:disabled[outlined]),
-:host([outlined][disabled]),
-:host([outlined][invalid]) {
+:host([outlined][disabled]) {
     igc-input::part(filled) + igc-input::part(notch) {
         border-top-color: transparent;
     }
 }
-
diff --git a/src/components/date-picker/themes/shared/date-picker.common.scss b/src/components/date-picker/themes/shared/date-picker.common.scss
@@ -97,8 +97,8 @@ $input-theme: input-theme.$material;
     }
 }
 
-:host(:not([disabled])[invalid]),
-:host(:not(:disabled)[invalid]) {
+:host(:not([disabled],[readonly]):state(ig-invalid)),
+:host(:not(:disabled,[readonly]):state(ig-invalid)) {
     ::part(helper-text) {
         color: var-get($theme, 'error-secondary-color');
     }
diff --git a/src/components/date-picker/themes/shared/date-picker.fluent.scss b/src/components/date-picker/themes/shared/date-picker.fluent.scss
@@ -37,18 +37,6 @@ $theme: $fluent;
     }
 }
 
-:host(:not([invalid])[readonly]:hover) {
-    igc-date-time-input::part(container) {
-        border-color: var-get($theme, 'border-color');
-    }
-}
-
-:host(:not([invalid])[readonly]:focus-within) {
-    igc-date-time-input::part(container) {
-        border-color: var-get($theme, 'focused-border-color');
-    }
-}
-
 :host(:disabled),
 :host([disabled]) {
     [part='label']::after {
diff --git a/src/components/date-picker/themes/shared/date-picker.indigo.scss b/src/components/date-picker/themes/shared/date-picker.indigo.scss
@@ -33,14 +33,14 @@ $input-theme: input-theme.$indigo;
     }
 }
 
-:host(:not([invalid])[readonly]) {
+:host([readonly]) {
     igc-date-time-input::part(container) {
         border-color: var-get($theme, 'disabled-text-color');
     }
 }
 
-:host(:not([disabled])[invalid]),
-:host(:not(:disabled)[invalid]) {
+:host(:not([disabled],[readonly]):state(ig-invalid)),
+:host(:not(:disabled,[readonly]):state(ig-invalid)) {
     ::part(helper-text) {
         color: var-get($input-theme, 'helper-text-color');
     }
diff --git a/src/components/date-picker/themes/shared/date-picker.material.scss b/src/components/date-picker/themes/shared/date-picker.material.scss
@@ -3,7 +3,7 @@
 
 $theme: $material;
 
-:host(:not([invalid])[outlined][readonly]:hover) {
+:host([outlined][readonly]:hover) {
     igc-date-time-input::part(start),
     igc-date-time-input::part(end),
     igc-date-time-input::part(filler) {
@@ -15,7 +15,7 @@ $theme: $material;
     }
 }
 
-:host(:not([invalid])[outlined][readonly]) {
+:host([outlined][readonly]) {
     igc-date-time-input:focus-within {
         &::part(start),
         &::part(end),
@@ -35,7 +35,7 @@ $theme: $material;
     }
 }
 
-:host(:not([outlined],[invalid])[readonly]) {
+:host(:not([outlined])[readonly]) {
     igc-date-time-input:hover {
         &::part(container) {
             border-bottom-color: var-get($theme, 'idle-bottom-line-color');
@@ -56,16 +56,3 @@ $theme: $material;
         }
     }
 }
-
-:host(:not([outlined])[readonly][invalid]) {
-    igc-date-time-input:hover,
-    igc-date-time-input:focus-within {
-        &::part(container) {
-            border-color: var-get($theme, 'error-secondary-color');
-
-            &::after {
-                border-color: var-get($theme, 'error-secondary-color');
-            }
-        }
-    }
-}
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.common.scss b/src/components/date-range-picker/themes/shared/date-range-picker.common.scss
@@ -91,8 +91,8 @@ $theme: $material;
     }
 }
 
-:host(:not([disabled])[invalid]),
-:host(:not(:disabled)[invalid]) {
+:host(:not([disabled],[readonly]):state(ig-invalid)),
+:host(:not(:disabled,[readonly]):state(ig-invalid)) {
     ::part(helper-text) {
         color: var-get($theme, 'error-secondary-color');
     }
diff --git a/src/components/file-input/themes/shared/file-input.bootstrap.scss b/src/components/file-input/themes/shared/file-input.bootstrap.scss
@@ -72,7 +72,7 @@ $theme-file-input: file-input.$bootstrap;
 }
 
 
-:host(:not([disabled])[invalid]) {
+:host(:not([disabled]):state(ig-invalid)) {
     --input-border-color: #{var-get($theme, 'error-secondary-color')};
 
     [part='prefix'],
@@ -82,7 +82,7 @@ $theme-file-input: file-input.$bootstrap;
     }
 }
 
-:host(:not([disabled])[invalid]:focus-within) {
+:host(:not([disabled]):state(ig-invalid):focus-within) {
     [part~='container'] {
         box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
     }
diff --git a/src/components/file-input/themes/shared/file-input.material.scss b/src/components/file-input/themes/shared/file-input.material.scss
@@ -82,8 +82,8 @@ $active-border-width: rem(2px) !default;
 }
 
 
-:host([outlined][invalid]),
-:host([outlined][invalid]:focus-within) {
+:host([outlined]:state(ig-invalid)),
+:host([outlined]:state(ig-invalid):focus-within) {
     [part='file-selector-button'] {
         border-color: var-get($theme, 'error-secondary-color');
     }
diff --git a/src/components/input/themes/shared/input.bootstrap.scss b/src/components/input/themes/shared/input.bootstrap.scss
@@ -170,13 +170,15 @@ $theme: $bootstrap;
     }
 }
 
-:host(:not([disabled])[invalid]) {
+:host(:not([disabled],[readonly]):state(ig-invalid)),
+:host(:not([disabled])[role='combobox']:state(ig-invalid)) {
     [part~='input'] {
         border-color: var-get($theme, 'error-secondary-color');
     }
 }
 
-:host(:not([disabled])[invalid]:focus-within) {
+:host(:not([disabled],[readonly]):state(ig-invalid):focus-within),
+:host(:not([disabled])[role='combobox']:state(ig-invalid):focus-within) {
     [part~='input'] {
         box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
     }
diff --git a/src/components/input/themes/shared/input.common.scss b/src/components/input/themes/shared/input.common.scss
@@ -64,7 +64,8 @@ $theme: $base;
     }
 }
 
-:host([invalid]) {
+:host(:not([disabled],[readonly]):state(ig-invalid)),
+:host(:not(:disabled,[readonly]):state(ig-invalid)) {
     ::part(helper-text) {
         color: var-get($theme, 'error-secondary-color');
     }
diff --git a/src/components/input/themes/shared/input.fluent.scss b/src/components/input/themes/shared/input.fluent.scss
@@ -95,7 +95,7 @@ $theme: $fluent;
     }
 }
 
-:host(:not([readonly], [invalid], :focus-within):hover) {
+:host(:not([readonly], :focus-within):hover) {
     [part^='container'] {
         &::before {
             // The color: here is the actual box-shadow color. If we don't provide color-value to the shadow it
@@ -108,7 +108,7 @@ $theme: $fluent;
     }
 }
 
-:host([aria-expanded][readonly]:not([invalid], :focus-within):hover) {
+:host([aria-expanded][readonly]:not(:focus-within):hover) {
     [part^='container'] {
         &::before {
             // The color: here is the actual box-shadow color. If we don't provide color-value to the shadow it
@@ -121,7 +121,7 @@ $theme: $fluent;
     }
 }
 
-:host([aria-haspopup]:not([readonly], [invalid], :focus-within):hover) {
+:host([aria-haspopup]:not([readonly], :focus-within):hover) {
     [part^='container'] {
         &::before {
             color: var-get($theme, 'hover-border-color');
@@ -189,10 +189,10 @@ $theme: $fluent;
     }
 }
 
-:host([invalid]),
-:host([invalid]:hover),
-:host([readonly][invalid]:hover),
-:host([readonly][invalid]:focus-within) {
+:host(:not([disabled],[readonly]):state(ig-invalid)),
+:host(:not([disabled],[readonly]):state(ig-invalid):hover),
+:host(:not([disabled])[role='combobox']:state(ig-invalid)),
+:host(:not([disabled])[role='combobox']:state(ig-invalid):hover) {
     ::part(helper-text) {
         color: var-get($theme, 'error-secondary-color');
     }
@@ -204,8 +204,8 @@ $theme: $fluent;
     }
 }
 
-:host([invalid]:focus-within),
-:host([readonly][invalid]:focus-within) {
+:host(:not([disabled],[readonly]):state(ig-invalid):focus-within),
+:host(:not([disabled])[role='combobox']:state(ig-invalid):focus-within) {
     [part~='container'] {
         &::before {
             box-shadow: inset 0 0 0 calc(var(--input-border-size) + #{rem(1px)}) var-get($theme, 'error-secondary-color');
diff --git a/src/components/input/themes/shared/input.indigo.scss b/src/components/input/themes/shared/input.indigo.scss
@@ -173,9 +173,9 @@ $transition-duration: .25s;
     }
 }
 
-:host([invalid]),
-:host([invalid]:hover),
-:host([invalid][readonly]) {
+:host(:not([disabled],[readonly]):state(ig-invalid)),
+:host(:not([disabled],[readonly]):state(ig-invalid):hover),
+:host(:not([disabled])[role='combobox']:state(ig-invalid)) {
     [part^='container'] {
         caret-color: initial;
         border-color: var-get($theme, 'error-secondary-color');
diff --git a/src/components/input/themes/shared/input.material.scss b/src/components/input/themes/shared/input.material.scss
@@ -262,9 +262,10 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(:not([outlined])[invalid]),
-:host(:not([outlined])[invalid]:focus-within),
-:host(:not([aria-haspopup='dialog'],[role='combobox'])[invalid][readonly]:hover) {
+:host(:not([outlined],[disabled],[readonly]):state(ig-invalid)),
+:host(:not([outlined],[disabled],[readonly]):state(ig-invalid):focus-within),
+:host(:not([disabled],[outlined])[role='combobox']:state(ig-invalid)),
+:host(:not([disabled],[outlined])[role='combobox']:state(ig-invalid):focus-within) {
     [part~='container'] {
         border-color: var-get($theme, 'error-secondary-color');
 
@@ -449,7 +450,7 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(:not([type='search'])[readonly][outlined]:focus-within) {
+:host(:not(:state(ig-invalid),[type='search'])[readonly][outlined]:focus-within) {
     :not([part~='filled']) {
         input:not(:placeholder-shown) + [part='notch'] [part='label'] {
             translate: 0;
@@ -540,9 +541,10 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(:not([type='search'])[outlined][invalid]),
-:host(:not([type='search'])[outlined][invalid]:focus-within),
-:host(:not([aria-haspopup='dialog'],[role='combobox'])[outlined][readonly][invalid]:hover) {
+:host(:not([type='search'],[readonly])[outlined]:state(ig-invalid)),
+:host(:not([type='search'],[readonly])[outlined]:state(ig-invalid):focus-within),
+:host(:not([disabled])[role='combobox'][outlined]:state(ig-invalid)),
+:host(:not([disabled])[role='combobox'][outlined]:state(ig-invalid):focus-within) {
     [part='start'],
     [part='notch'],
     [part='filler'],
@@ -556,28 +558,23 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
-:host(:not([type='search'])[outlined][invalid]:focus-within) {
-    [part='notch'] {
-        border-top: $idle-border-width solid transparent;
-    }
-}
-
-:host(:not([type='search'])[readonly][outlined][invalid]:focus-within) {
-    input:not(:placeholder-shown) + [part='notch'] {
-        border: {
-            width: $active-border-width;
-            color: var-get($theme, 'error-secondary-color');
-            top: $active-border-width solid
-                var-get($theme, 'error-secondary-color');
+:host(:not([disabled])[role='combobox'][outlined]:state(ig-invalid):focus-within) {
+     :not([part~='filled']) {
+        input:not(:placeholder-shown) + [part='notch'] {
+            border-width: $active-border-width;
         }
     }
+}
 
-    [part~='filled'] + [part='notch'] {
-        border-top: $idle-border-width solid transparent !important;
+:host(:not([type='search'])[outlined]:state(ig-invalid):focus-within),
+:host([role='combobox'][outlined]:state(ig-invalid):focus-within) {
+    [part='notch'] {
+        border-top: $idle-border-width solid transparent;
     }
 }
 
-:host([invalid]) {
+:host(:not([disabled],[readonly]):state(ig-invalid)),
+:host(:not([disabled])[role='combobox']:state(ig-invalid)) {
     [part='label'] {
         color: var-get($theme, 'error-secondary-color');
     }
diff --git a/src/components/select/themes/shared/select.bootstrap.scss b/src/components/select/themes/shared/select.bootstrap.scss
@@ -24,25 +24,13 @@ $input-theme: input-theme.$bootstrap;
     padding: rem(8px) 0;
 }
 
-:host(:focus-within) {
+:host(:not(:state(ig-invalid)):focus-within) {
     igc-input[readonly]:not([disabled])::part(input) {
         box-shadow: 0 0 0 rem(4px) var-get($input-theme, 'focused-secondary-color');
         border-color: var-get($input-theme, 'focused-border-color');
     }
 }
 
-:host([invalid]) {
-    igc-input[readonly]:not([disabled])::part(input) {
-        border-color: var-get($input-theme, 'error-secondary-color');
-    }
-}
-
-:host([invalid]:focus-within) {
-    igc-input[readonly]:not([disabled])::part(input) {
-        box-shadow: 0 0 0 rem(4px) var-get($input-theme, 'error-shadow-color');
-    }
-}
-
 :host([disabled]),
 :host(:disabled) {
     igc-validator {
diff --git a/src/components/select/themes/shared/select.common.scss b/src/components/select/themes/shared/select.common.scss
@@ -59,8 +59,8 @@ $dropdown-theme: dropdown-theme.$material;
     }
 }
 
-:host(:not([disabled])[invalid]),
-:host(:not(:disabled)[invalid]) {
+:host(:not([disabled]):state(ig-invalid)),
+:host(:not(:disabled):state(ig-invalid)) {
     ::part(helper-text) {
         color: var-get($theme, 'error-secondary-color');
     }
diff --git a/src/components/select/themes/shared/select.fluent.scss b/src/components/select/themes/shared/select.fluent.scss
diff --git a/src/components/select/themes/shared/select.indigo.scss b/src/components/select/themes/shared/select.indigo.scss
diff --git a/src/components/select/themes/shared/select.material.scss b/src/components/select/themes/shared/select.material.scss
diff --git a/src/components/textarea/themes/shared/textarea.bootstrap.scss b/src/components/textarea/themes/shared/textarea.bootstrap.scss
diff --git a/src/components/textarea/themes/shared/textarea.common.scss b/src/components/textarea/themes/shared/textarea.common.scss
diff --git a/src/components/textarea/themes/shared/textarea.fluent.scss b/src/components/textarea/themes/shared/textarea.fluent.scss
diff --git a/src/components/textarea/themes/shared/textarea.indigo.scss b/src/components/textarea/themes/shared/textarea.indigo.scss
diff --git a/src/components/textarea/themes/shared/textarea.material.scss b/src/components/textarea/themes/shared/textarea.material.scss

Original file line number	Diff line number	Diff line change
`@@ -59,8 +59,8 @@ $dropdown-theme: dropdown-theme.$material;`
`59`	`59`	`}`
`60`	`60`	`}`
`61`	`61`
`62`		`-:host(:not([disabled])[invalid]),`
`63`		`-:host(:not(:disabled)[invalid]) {`
	`62`	`+:host(:not([disabled]):state(ig-invalid)),`
	`63`	`+:host(:not(:disabled):state(ig-invalid)) {`
`64`	`64`	`::part(helper-text) {`
`65`	`65`	`color: var-get($theme, 'error-secondary-color');`
`66`	`66`	`}`
Original file line number	Diff line number	Diff line change
`@@ -92,8 +92,8 @@ $dropdown-theme: dropdown-theme.$indigo;`
`92`	`92`	`}`
`93`	`93`	`}`
`94`	`94`
`95`		`-:host(:not([disabled])[invalid]),`
`96`		`-:host(:not(:disabled)[invalid]) {`
	`95`	`+:host(:not([disabled]):state(ig-invalid)),`
	`96`	`+:host(:not(:disabled):state(ig-invalid)) {`
`97`	`97`	`::part(helper-text) {`
`98`	`98`	`color: var-get($input-theme, 'helper-text-color');`
`99`	`99`	`}`
Original file line number	Diff line number	Diff line change
`@@ -131,10 +131,8 @@ $dropdown-theme: dropdown-theme.$material;`
`131`	`131`	`}`
`132`	`132`
`133`	`133`	`:host(:disabled[outlined]),`
`134`		`-:host([outlined][disabled]),`
`135`		`-:host([outlined][invalid]) {`
	`134`	`+:host([outlined][disabled]) {`
`136`	`135`	`igc-input::part(filled) + igc-input::part(notch) {`
`137`	`136`	`border-top-color: transparent;`
`138`	`137`	`}`
`139`	`138`	`}`
`140`		`-`
Original file line number	Diff line number	Diff line change
`@@ -97,8 +97,8 @@ $input-theme: input-theme.$material;`
`97`	`97`	`}`
`98`	`98`	`}`
`99`	`99`
`100`		`-:host(:not([disabled])[invalid]),`
`101`		`-:host(:not(:disabled)[invalid]) {`
	`100`	`+:host(:not([disabled],[readonly]):state(ig-invalid)),`
	`101`	`+:host(:not(:disabled,[readonly]):state(ig-invalid)) {`
`102`	`102`	`::part(helper-text) {`
`103`	`103`	`color: var-get($theme, 'error-secondary-color');`
`104`	`104`	`}`
Original file line number	Diff line number	Diff line change
`@@ -33,14 +33,14 @@ $input-theme: input-theme.$indigo;`
`33`	`33`	`}`
`34`	`34`	`}`
`35`	`35`
`36`		`-:host(:not([invalid])[readonly]) {`
	`36`	`+:host([readonly]) {`
`37`	`37`	`igc-date-time-input::part(container) {`
`38`	`38`	`border-color: var-get($theme, 'disabled-text-color');`
`39`	`39`	`}`
`40`	`40`	`}`
`41`	`41`
`42`		`-:host(:not([disabled])[invalid]),`
`43`		`-:host(:not(:disabled)[invalid]) {`
	`42`	`+:host(:not([disabled],[readonly]):state(ig-invalid)),`
	`43`	`+:host(:not(:disabled,[readonly]):state(ig-invalid)) {`
`44`	`44`	`::part(helper-text) {`
`45`	`45`	`color: var-get($input-theme, 'helper-text-color');`
`46`	`46`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`
`4`	`4`	`$theme: $material;`
`5`	`5`
`6`		`-:host(:not([invalid])[outlined][readonly]:hover) {`
	`6`	`+:host([outlined][readonly]:hover) {`
`7`	`7`	`igc-date-time-input::part(start),`
`8`	`8`	`igc-date-time-input::part(end),`
`9`	`9`	`igc-date-time-input::part(filler) {`
`@@ -15,7 +15,7 @@ $theme: $material;`
`15`	`15`	`}`
`16`	`16`	`}`
`17`	`17`
`18`		`-:host(:not([invalid])[outlined][readonly]) {`
	`18`	`+:host([outlined][readonly]) {`
`19`	`19`	`igc-date-time-input:focus-within {`
`20`	`20`	`&::part(start),`
`21`	`21`	`&::part(end),`
`@@ -35,7 +35,7 @@ $theme: $material;`
`35`	`35`	`}`
`36`	`36`	`}`
`37`	`37`
`38`		`-:host(:not([outlined],[invalid])[readonly]) {`
	`38`	`+:host(:not([outlined])[readonly]) {`
`39`	`39`	`igc-date-time-input:hover {`
`40`	`40`	`&::part(container) {`
`41`	`41`	`border-bottom-color: var-get($theme, 'idle-bottom-line-color');`
`@@ -56,16 +56,3 @@ $theme: $material;`
`56`	`56`	`}`
`57`	`57`	`}`
`58`	`58`	`}`
`59`		`-`
`60`		`-:host(:not([outlined])[readonly][invalid]) {`
`61`		`- igc-date-time-input:hover,`
`62`		`- igc-date-time-input:focus-within {`
`63`		`- &::part(container) {`
`64`		`- border-color: var-get($theme, 'error-secondary-color');`
`65`		`-`
`66`		`- &::after {`
`67`		`- border-color: var-get($theme, 'error-secondary-color');`
`68`		`- }`
`69`		`- }`
`70`		`- }`
`71`		`-}`
Original file line number	Diff line number	Diff line change
`@@ -91,8 +91,8 @@ $theme: $material;`
`91`	`91`	`}`
`92`	`92`	`}`
`93`	`93`
`94`		`-:host(:not([disabled])[invalid]),`
`95`		`-:host(:not(:disabled)[invalid]) {`
	`94`	`+:host(:not([disabled],[readonly]):state(ig-invalid)),`
	`95`	`+:host(:not(:disabled,[readonly]):state(ig-invalid)) {`
`96`	`96`	`::part(helper-text) {`
`97`	`97`	`color: var-get($theme, 'error-secondary-color');`
`98`	`98`	`}`
Original file line number	Diff line number	Diff line change
`@@ -72,7 +72,7 @@ $theme-file-input: file-input.$bootstrap;`
`72`	`72`	`}`
`73`	`73`
`74`	`74`
`75`		`-:host(:not([disabled])[invalid]) {`
	`75`	`+:host(:not([disabled]):state(ig-invalid)) {`
`76`	`76`	`--input-border-color: #{var-get($theme, 'error-secondary-color')};`
`77`	`77`
`78`	`78`	`[part='prefix'],`
`@@ -82,7 +82,7 @@ $theme-file-input: file-input.$bootstrap;`
`82`	`82`	`}`
`83`	`83`	`}`
`84`	`84`
`85`		`-:host(:not([disabled])[invalid]:focus-within) {`
	`85`	`+:host(:not([disabled]):state(ig-invalid):focus-within) {`
`86`	`86`	`[part~='container'] {`
`87`	`87`	`box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');`
`88`	`88`	`}`
Original file line number	Diff line number	Diff line change
`@@ -82,8 +82,8 @@ $active-border-width: rem(2px) !default;`
`82`	`82`	`}`
`83`	`83`
`84`	`84`
`85`		`-:host([outlined][invalid]),`
`86`		`-:host([outlined][invalid]:focus-within) {`
	`85`	`+:host([outlined]:state(ig-invalid)),`
	`86`	`+:host([outlined]:state(ig-invalid):focus-within) {`
`87`	`87`	`[part='file-selector-button'] {`
`88`	`88`	`border-color: var-get($theme, 'error-secondary-color');`
`89`	`89`	`}`