@kaizen/components 1.4.26 → 1.5.0

package/dist/iife/ButtonGroup.module-NQDV3763.scss

@@ -0,0 +1,73 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+
+$focus-ring-offset: 1px;
+$focus-ring-offset-inner: calc(-1 * #{$focus-ring-offset});
+
+// Polyfill
+$polyfill--focus-visible: ":global(.js-focus-visible) &:global(.focus-visible)";
+
+// Classnames to simulate pseudo states in storybook
+$story-className--button-group--focus: ":global(.story__button-group--focus)";
+
+// Combined pseudo state classes
+$selectors--button-group--focus: "&:focus-visible, #{$polyfill--focus-visible}, &#{$story-className--button-group--focus}";
+
+%firstChildBorders {
+  border-start-start-radius: $border-focus-ring-border-radius;
+  border-end-start-radius: $border-focus-ring-border-radius;
+}
+
+%lastChildBorders {
+  border-start-end-radius: $border-focus-ring-border-radius;
+  border-end-end-radius: $border-focus-ring-border-radius;
+}
+
+.buttonGroup {
+  display: inline-flex;
+
+  .child {
+    border-radius: 0;
+
+    #{$selectors--button-group--focus} {
+      &::after {
+        border-radius: 0;
+      }
+    }
+
+    &.firstChild {
+      @extend %firstChildBorders;
+
+      #{$selectors--button-group--focus} {
+        &::after {
+          @extend %firstChildBorders;
+          inset-inline-end: $focus-ring-offset-inner;
+        }
+      }
+    }
+
+    &:not(.firstChild) {
+      border-inline-start: 1px solid $color-blue-300;
+    }
+
+    &:not(.firstChild):not(.lastChild) {
+      #{$selectors--button-group--focus} {
+        &::after {
+          inset-inline-start: $focus-ring-offset-inner;
+          inset-inline-end: $focus-ring-offset-inner;
+        }
+      }
+    }
+
+    &.lastChild {
+      @extend %lastChildBorders;
+
+      #{$selectors--button-group--focus} {
+        &::after {
+          @extend %lastChildBorders;
+          inset-inline-start: $focus-ring-offset-inner;
+        }
+      }
+    }
+  }
+}