From ddf4ddee6de71fcda189921aa05c0bf6b9c019ab Mon Sep 17 00:00:00 2001
From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com>
Date: Thu, 1 Feb 2024 09:49:35 +0200
Subject: [PATCH] fix(btn-group): disabled state in safari (#1047)

---
 .../button-group/themes/button.base.scss      |  8 ++++++--
 .../themes/shared/button/button.common.scss   | 19 +++++++++++++------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/button-group/themes/button.base.scss b/src/components/button-group/themes/button.base.scss
index 85baf9010..f0e4785ad 100644
--- a/src/components/button-group/themes/button.base.scss
+++ b/src/components/button-group/themes/button.base.scss
@@ -46,14 +46,18 @@ $transition: all 140ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
     }
 }
 
-:host-context(:disabled),
-:host-context([disabled]),
 :host(:disabled),
 :host([disabled]) {
     cursor: default;
     pointer-events: none;
 }
 
+:host-context(:disabled),
+:host-context([disabled]) {
+    cursor: default;
+    pointer-events: none;
+}
+
 :host([selected]:disabled),
 :host([selected][disabled]) {
     [part~='toggle'] {
diff --git a/src/components/button-group/themes/shared/button/button.common.scss b/src/components/button-group/themes/shared/button/button.common.scss
index 08ac47380..f860c650a 100644
--- a/src/components/button-group/themes/shared/button/button.common.scss
+++ b/src/components/button-group/themes/shared/button/button.common.scss
@@ -3,6 +3,14 @@
 
 $theme: $material;
 
+@mixin disabled {
+    [part~='toggle'] {
+        color: var-get($theme, 'disabled-text-color');
+        background: var-get($theme, 'disabled-background-color');
+        border-color: var-get($theme, 'item-disabled-border');
+    }
+}
+
 :host {
     [part~='toggle'] {
         $icon-size: rem(18px);
@@ -44,12 +52,11 @@ $theme: $material;
 }
 
 :host([disabled]),
-:host(:disabled),
+:host(:disabled) {
+    @include disabled();
+}
+
 :host-context([disabled]),
 :host-context(:disabled) {
-    [part~='toggle'] {
-        color: var-get($theme, 'disabled-text-color');
-        background: var-get($theme, 'disabled-background-color');
-        border-color: var-get($theme, 'item-disabled-border');
-    }
+    @include disabled();
 }