@ebay/skin 17.5.0-next.0 → 18.0.0-next.0

package/dist/toggle-button-group/toggle-button-group.css

@@ -1,88 +1,638 @@
+:root {
+    --row-min-toggle-buttons-min: 2;
+    --row-min-toggle-buttons-xs: 4;
+    --row-min-toggle-buttons-sm: 5;
+    --row-min-toggle-buttons-md: 8;
+    --row-min-toggle-buttons-xl: 12;
+    --row-list-toggle-buttons-min: 1;
+    --row-list-toggle-buttons-xs: 1;
+    --row-list-toggle-buttons-sm: 2;
+    --row-list-toggle-buttons-md: 3;
+    --row-list-toggle-buttons-xl: 5;
+    --row-gallery-toggle-buttons-min: 1;
+    --row-gallery-toggle-buttons-xs: 2;
+    --row-gallery-toggle-buttons-sm: 3;
+    --row-gallery-toggle-buttons-md: 4;
+    --row-gallery-toggle-buttons-xl: 6;
+}
+
 .toggle-button-group {
-  display: inline-block;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  width: 100%;
+    container: toggle-buttons-container/inline-size;
+}
+
+.toggle-button-group ul {
+    display: grid;
+    gap: var(--spacing-100);
+    grid-auto-rows: 1fr;
+    grid-template-columns: repeat(var(--row-min-toggle-buttons-min), 1fr);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
 }
+
 .toggle-button-group li {
-  display: inline-block;
-  margin-bottom: var(--spacing-50);
-  margin-left: var(--spacing-50);
-  margin-right: var(--spacing-50);
-  margin-top: var(--spacing-50);
-  max-width: var(--toggle-button-width-max);
-  min-height: var(--toggle-button-height-min);
-  min-width: var(--toggle-button-width-min);
+    display: inline-block;
+    min-height: var(--toggle-button-height-min);
+    width: 100%;
 }
+
 .toggle-button-group .toggle-button {
-  width: 100%;
-}
-/* Layout Themes */
-.toggle-button-group--list-layout li {
-  max-width: var(--toggle-button-list-width-max);
-  min-width: var(--toggle-button-list-width-min);
+    height: 100%;
+    margin: 0;
+    max-width: 100%;
+    width: 100%;
 }
 .toggle-button-group--list-layout .toggle-button {
-  justify-content: left;
-  max-width: var(--toggle-button-list-width-max);
-  min-width: var(--toggle-button-list-width-min);
+    justify-content: left;
+    max-width: 100%;
+    min-width: auto;
 }
+
 .toggle-button-group--gallery-layout li {
-  max-width: var(--toggle-button-gallery-width-max);
-  min-width: var(--toggle-button-gallery-width-min);
+    max-width: 100%;
+}
+
+.toggle-button-group--gallery-layout .toggle-button {
+    flex-direction: column;
+    max-width: 100%;
+    min-width: auto;
+}
+
+.toggle-button-group--list-layout .toggle-button__content,
+.toggle-button-group--list-layout .toggle-button__image-container {
+    align-self: flex-start;
 }
+
 .toggle-button-group--gallery-layout .toggle-button {
-  flex-direction: column;
+    justify-content: flex-start;
 }
-.toggle-button-group--gallery-layout .toggle-button__image,
-.toggle-button-group--gallery-layout .toggle-button__icon {
-  margin-bottom: 0;
-  margin-right: 0;
+
+.toggle-button-group--gallery-layout .toggle-button__icon,
+.toggle-button-group--gallery-layout .toggle-button__image {
+    margin-bottom: 0;
+    margin-right: 0;
 }
-.toggle-button-group--gallery-layout .toggle-button__icon ~ .toggle-button__content,
-.toggle-button-group--gallery-layout .toggle-button__image-container ~ .toggle-button__content {
-  align-self: flex-start;
+
+.toggle-button-group--gallery-layout
+    .toggle-button__icon
+    ~ .toggle-button__content,
+.toggle-button-group--gallery-layout
+    .toggle-button__image-container
+    ~ .toggle-button__content {
+    align-self: flex-start;
 }
+
 .toggle-button-group--gallery-layout .toggle-button__icon,
 .toggle-button-group--gallery-layout .toggle-button__image-container {
-  margin-bottom: 0;
-  margin-right: 0;
-  text-align: left;
+    margin-bottom: 0;
+    margin-right: 0;
+    text-align: left;
 }
+
 .toggle-button-group--gallery-layout .toggle-button__image-container {
-  padding-bottom: 60%;
-  position: relative;
-  text-align: center;
-  width: 100%;
+    padding-bottom: 60%;
+    position: relative;
+    text-align: center;
+    width: 100%;
 }
+
 .toggle-button-group--gallery-layout .toggle-button__image {
-  bottom: 0;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 100%;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
 }
+
 .toggle-button-group--gallery-layout .toggle-button__image-container img {
-  height: 100%;
-  max-height: 200px;
-  max-width: initial;
+    height: 100%;
+    max-height: 200px;
+    max-width: none;
 }
-/* Columns */
-.toggle-button-group[data-columns="2"] li {
-  width: calc(100% / 2 - 11px);
+@supports not (contain: inline-size) {
+    @media (min-width: 320px) {
+        .toggle-button-group ul {
+            grid-template-columns: repeat(
+                var(--row-min-toggle-buttons-xs),
+                1fr
+            );
+        }
+        .toggle-button-group--list-layout ul {
+            grid-template-columns: repeat(
+                var(--row-list-toggle-buttons-xs),
+                1fr
+            );
+        }
+        .toggle-button-group--gallery-layout ul {
+            grid-template-columns: repeat(
+                var(--row-gallery-toggle-buttons-xs),
+                1fr
+            );
+        }
+        .toggle-button-group[data-columns-xs="1"] ul {
+            grid-template-columns: repeat(1, 1fr);
+        }
+        .toggle-button-group[data-columns-xs="2"] ul {
+            grid-template-columns: repeat(2, 1fr);
+        }
+        .toggle-button-group[data-columns-xs="3"] ul {
+            grid-template-columns: repeat(3, 1fr);
+        }
+        .toggle-button-group[data-columns-xs="4"] ul {
+            grid-template-columns: repeat(4, 1fr);
+        }
+        .toggle-button-group[data-columns-xs="5"] ul {
+            grid-template-columns: repeat(5, 1fr);
+        }
+        .toggle-button-group[data-columns-xs="6"] ul {
+            grid-template-columns: repeat(6, 1fr);
+        }
+        .toggle-button-group[data-columns-xs="7"] ul {
+            grid-template-columns: repeat(7, 1fr);
+        }
+        .toggle-button-group[data-columns-xs="8"] ul {
+            grid-template-columns: repeat(8, 1fr);
+        }
+        .toggle-button-group[data-columns-xs="9"] ul {
+            grid-template-columns: repeat(9, 1fr);
+        }
+        .toggle-button-group[data-columns-xs="10"] ul {
+            grid-template-columns: repeat(10, 1fr);
+        }
+        .toggle-button-group[data-columns-xs="11"] ul {
+            grid-template-columns: repeat(11, 1fr);
+        }
+        .toggle-button-group[data-columns-xs="12"] ul {
+            grid-template-columns: repeat(12, 1fr);
+        }
+        .toggle-button-group[data-columns-xs="13"] ul {
+            grid-template-columns: repeat(13, 1fr);
+        }
+        .toggle-button-group[data-columns-xs="14"] ul {
+            grid-template-columns: repeat(14, 1fr);
+        }
+        .toggle-button-group[data-columns-xs="15"] ul {
+            grid-template-columns: repeat(15, 1fr);
+        }
+        .toggle-button-group[data-columns-xs="16"] ul {
+            grid-template-columns: repeat(16, 1fr);
+        }
+    }
+    @media (min-width: 512px) {
+        .toggle-button-group ul {
+            grid-template-columns: repeat(
+                var(--row-min-toggle-buttons-sm),
+                1fr
+            );
+        }
+        .toggle-button-group--list-layout ul {
+            grid-template-columns: repeat(
+                var(--row-list-toggle-buttons-sm),
+                1fr
+            );
+        }
+        .toggle-button-group--gallery-layout ul {
+            grid-template-columns: repeat(
+                var(--row-gallery-toggle-buttons-sm),
+                1fr
+            );
+        }
+        .toggle-button-group[data-columns-sm="1"] ul {
+            grid-template-columns: repeat(1, 1fr);
+        }
+        .toggle-button-group[data-columns-sm="2"] ul {
+            grid-template-columns: repeat(2, 1fr);
+        }
+        .toggle-button-group[data-columns-sm="3"] ul {
+            grid-template-columns: repeat(3, 1fr);
+        }
+        .toggle-button-group[data-columns-sm="4"] ul {
+            grid-template-columns: repeat(4, 1fr);
+        }
+        .toggle-button-group[data-columns-sm="5"] ul {
+            grid-template-columns: repeat(5, 1fr);
+        }
+        .toggle-button-group[data-columns-sm="6"] ul {
+            grid-template-columns: repeat(6, 1fr);
+        }
+        .toggle-button-group[data-columns-sm="7"] ul {
+            grid-template-columns: repeat(7, 1fr);
+        }
+        .toggle-button-group[data-columns-sm="8"] ul {
+            grid-template-columns: repeat(8, 1fr);
+        }
+        .toggle-button-group[data-columns-sm="9"] ul {
+            grid-template-columns: repeat(9, 1fr);
+        }
+        .toggle-button-group[data-columns-sm="10"] ul {
+            grid-template-columns: repeat(10, 1fr);
+        }
+        .toggle-button-group[data-columns-sm="11"] ul {
+            grid-template-columns: repeat(11, 1fr);
+        }
+        .toggle-button-group[data-columns-sm="12"] ul {
+            grid-template-columns: repeat(12, 1fr);
+        }
+        .toggle-button-group[data-columns-sm="13"] ul {
+            grid-template-columns: repeat(13, 1fr);
+        }
+        .toggle-button-group[data-columns-sm="14"] ul {
+            grid-template-columns: repeat(14, 1fr);
+        }
+        .toggle-button-group[data-columns-sm="15"] ul {
+            grid-template-columns: repeat(15, 1fr);
+        }
+        .toggle-button-group[data-columns-sm="16"] ul {
+            grid-template-columns: repeat(16, 1fr);
+        }
+    }
+    @media (min-width: 768px) {
+        .toggle-button-group ul {
+            grid-template-columns: repeat(
+                var(--row-min-toggle-buttons-md),
+                1fr
+            );
+        }
+        .toggle-button-group--list-layout ul {
+            grid-template-columns: repeat(
+                var(--row-list-toggle-buttons-md),
+                1fr
+            );
+        }
+        .toggle-button-group--gallery-layout ul {
+            grid-template-columns: repeat(
+                var(--row-gallery-toggle-buttons-md),
+                1fr
+            );
+        }
+        .toggle-button-group[data-columns-md="1"] ul {
+            grid-template-columns: repeat(1, 1fr);
+        }
+        .toggle-button-group[data-columns-md="2"] ul {
+            grid-template-columns: repeat(2, 1fr);
+        }
+        .toggle-button-group[data-columns-md="3"] ul {
+            grid-template-columns: repeat(3, 1fr);
+        }
+        .toggle-button-group[data-columns-md="4"] ul {
+            grid-template-columns: repeat(4, 1fr);
+        }
+        .toggle-button-group[data-columns-md="5"] ul {
+            grid-template-columns: repeat(5, 1fr);
+        }
+        .toggle-button-group[data-columns-md="6"] ul {
+            grid-template-columns: repeat(6, 1fr);
+        }
+        .toggle-button-group[data-columns-md="7"] ul {
+            grid-template-columns: repeat(7, 1fr);
+        }
+        .toggle-button-group[data-columns-md="8"] ul {
+            grid-template-columns: repeat(8, 1fr);
+        }
+        .toggle-button-group[data-columns-md="9"] ul {
+            grid-template-columns: repeat(9, 1fr);
+        }
+        .toggle-button-group[data-columns-md="10"] ul {
+            grid-template-columns: repeat(10, 1fr);
+        }
+        .toggle-button-group[data-columns-md="11"] ul {
+            grid-template-columns: repeat(11, 1fr);
+        }
+        .toggle-button-group[data-columns-md="12"] ul {
+            grid-template-columns: repeat(12, 1fr);
+        }
+        .toggle-button-group[data-columns-md="13"] ul {
+            grid-template-columns: repeat(13, 1fr);
+        }
+        .toggle-button-group[data-columns-md="14"] ul {
+            grid-template-columns: repeat(14, 1fr);
+        }
+        .toggle-button-group[data-columns-md="15"] ul {
+            grid-template-columns: repeat(15, 1fr);
+        }
+        .toggle-button-group[data-columns-md="16"] ul {
+            grid-template-columns: repeat(16, 1fr);
+        }
+    }
+    @media (min-width: 1280px) {
+        .toggle-button-group ul {
+            grid-template-columns: repeat(
+                var(--row-min-toggle-buttons-xl),
+                1fr
+            );
+        }
+        .toggle-button-group--list-layout ul {
+            grid-template-columns: repeat(
+                var(--row-list-toggle-buttons-xl),
+                1fr
+            );
+        }
+        .toggle-button-group--gallery-layout ul {
+            grid-template-columns: repeat(
+                var(--row-gallery-toggle-buttons-xl),
+                1fr
+            );
+        }
+        .toggle-button-group[data-columns-xl="1"] ul {
+            grid-template-columns: repeat(1, 1fr);
+        }
+        .toggle-button-group[data-columns-xl="2"] ul {
+            grid-template-columns: repeat(2, 1fr);
+        }
+        .toggle-button-group[data-columns-xl="3"] ul {
+            grid-template-columns: repeat(3, 1fr);
+        }
+        .toggle-button-group[data-columns-xl="4"] ul {
+            grid-template-columns: repeat(4, 1fr);
+        }
+        .toggle-button-group[data-columns-xl="5"] ul {
+            grid-template-columns: repeat(5, 1fr);
+        }
+        .toggle-button-group[data-columns-xl="6"] ul {
+            grid-template-columns: repeat(6, 1fr);
+        }
+        .toggle-button-group[data-columns-xl="7"] ul {
+            grid-template-columns: repeat(7, 1fr);
+        }
+        .toggle-button-group[data-columns-xl="8"] ul {
+            grid-template-columns: repeat(8, 1fr);
+        }
+        .toggle-button-group[data-columns-xl="9"] ul {
+            grid-template-columns: repeat(9, 1fr);
+        }
+        .toggle-button-group[data-columns-xl="10"] ul {
+            grid-template-columns: repeat(10, 1fr);
+        }
+        .toggle-button-group[data-columns-xl="11"] ul {
+            grid-template-columns: repeat(11, 1fr);
+        }
+        .toggle-button-group[data-columns-xl="12"] ul {
+            grid-template-columns: repeat(12, 1fr);
+        }
+        .toggle-button-group[data-columns-xl="13"] ul {
+            grid-template-columns: repeat(13, 1fr);
+        }
+        .toggle-button-group[data-columns-xl="14"] ul {
+            grid-template-columns: repeat(14, 1fr);
+        }
+        .toggle-button-group[data-columns-xl="15"] ul {
+            grid-template-columns: repeat(15, 1fr);
+        }
+        .toggle-button-group[data-columns-xl="16"] ul {
+            grid-template-columns: repeat(16, 1fr);
+        }
+    }
 }
-.toggle-button-group[data-columns="3"] li {
-  width: calc(100% / 3 - 11px);
+@container toggle-buttons-container (inline-size >= 320px) {
+    .toggle-button-group ul {
+        grid-template-columns: repeat(var(--row-min-toggle-buttons-xs), 1fr);
+    }
+    .toggle-button-group--list-layout ul {
+        grid-template-columns: repeat(var(--row-list-toggle-buttons-xs), 1fr);
+    }
+    .toggle-button-group--gallery-layout ul {
+        grid-template-columns: repeat(
+            var(--row-gallery-toggle-buttons-xs),
+            1fr
+        );
+    }
+    .toggle-button-group[data-columns-xs="1"] ul {
+        grid-template-columns: repeat(1, 1fr);
+    }
+    .toggle-button-group[data-columns-xs="2"] ul {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .toggle-button-group[data-columns-xs="3"] ul {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    .toggle-button-group[data-columns-xs="4"] ul {
+        grid-template-columns: repeat(4, 1fr);
+    }
+    .toggle-button-group[data-columns-xs="5"] ul {
+        grid-template-columns: repeat(5, 1fr);
+    }
+    .toggle-button-group[data-columns-xs="6"] ul {
+        grid-template-columns: repeat(6, 1fr);
+    }
+    .toggle-button-group[data-columns-xs="7"] ul {
+        grid-template-columns: repeat(7, 1fr);
+    }
+    .toggle-button-group[data-columns-xs="8"] ul {
+        grid-template-columns: repeat(8, 1fr);
+    }
+    .toggle-button-group[data-columns-xs="9"] ul {
+        grid-template-columns: repeat(9, 1fr);
+    }
+    .toggle-button-group[data-columns-xs="10"] ul {
+        grid-template-columns: repeat(10, 1fr);
+    }
+    .toggle-button-group[data-columns-xs="11"] ul {
+        grid-template-columns: repeat(11, 1fr);
+    }
+    .toggle-button-group[data-columns-xs="12"] ul {
+        grid-template-columns: repeat(12, 1fr);
+    }
+    .toggle-button-group[data-columns-xs="13"] ul {
+        grid-template-columns: repeat(13, 1fr);
+    }
+    .toggle-button-group[data-columns-xs="14"] ul {
+        grid-template-columns: repeat(14, 1fr);
+    }
+    .toggle-button-group[data-columns-xs="15"] ul {
+        grid-template-columns: repeat(15, 1fr);
+    }
+    .toggle-button-group[data-columns-xs="16"] ul {
+        grid-template-columns: repeat(16, 1fr);
+    }
 }
-.toggle-button-group[data-columns="4"] li {
-  width: calc(100% / 4 - 11px);
+@container toggle-buttons-container (inline-size >= 512px) {
+    .toggle-button-group ul {
+        grid-template-columns: repeat(var(--row-min-toggle-buttons-sm), 1fr);
+    }
+    .toggle-button-group--list-layout ul {
+        grid-template-columns: repeat(var(--row-list-toggle-buttons-sm), 1fr);
+    }
+    .toggle-button-group--gallery-layout ul {
+        grid-template-columns: repeat(
+            var(--row-gallery-toggle-buttons-sm),
+            1fr
+        );
+    }
+    .toggle-button-group[data-columns-sm="1"] ul {
+        grid-template-columns: repeat(1, 1fr);
+    }
+    .toggle-button-group[data-columns-sm="2"] ul {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .toggle-button-group[data-columns-sm="3"] ul {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    .toggle-button-group[data-columns-sm="4"] ul {
+        grid-template-columns: repeat(4, 1fr);
+    }
+    .toggle-button-group[data-columns-sm="5"] ul {
+        grid-template-columns: repeat(5, 1fr);
+    }
+    .toggle-button-group[data-columns-sm="6"] ul {
+        grid-template-columns: repeat(6, 1fr);
+    }
+    .toggle-button-group[data-columns-sm="7"] ul {
+        grid-template-columns: repeat(7, 1fr);
+    }
+    .toggle-button-group[data-columns-sm="8"] ul {
+        grid-template-columns: repeat(8, 1fr);
+    }
+    .toggle-button-group[data-columns-sm="9"] ul {
+        grid-template-columns: repeat(9, 1fr);
+    }
+    .toggle-button-group[data-columns-sm="10"] ul {
+        grid-template-columns: repeat(10, 1fr);
+    }
+    .toggle-button-group[data-columns-sm="11"] ul {
+        grid-template-columns: repeat(11, 1fr);
+    }
+    .toggle-button-group[data-columns-sm="12"] ul {
+        grid-template-columns: repeat(12, 1fr);
+    }
+    .toggle-button-group[data-columns-sm="13"] ul {
+        grid-template-columns: repeat(13, 1fr);
+    }
+    .toggle-button-group[data-columns-sm="14"] ul {
+        grid-template-columns: repeat(14, 1fr);
+    }
+    .toggle-button-group[data-columns-sm="15"] ul {
+        grid-template-columns: repeat(15, 1fr);
+    }
+    .toggle-button-group[data-columns-sm="16"] ul {
+        grid-template-columns: repeat(16, 1fr);
+    }
 }
-.toggle-button-group[data-columns="5"] li {
-  width: calc(100% / 5 - 11px);
+@container toggle-buttons-container (inline-size >= 768px) {
+    .toggle-button-group ul {
+        grid-template-columns: repeat(var(--row-min-toggle-buttons-md), 1fr);
+    }
+    .toggle-button-group--list-layout ul {
+        grid-template-columns: repeat(var(--row-list-toggle-buttons-md), 1fr);
+    }
+    .toggle-button-group--gallery-layout ul {
+        grid-template-columns: repeat(
+            var(--row-gallery-toggle-buttons-md),
+            1fr
+        );
+    }
+    .toggle-button-group[data-columns-md="1"] ul {
+        grid-template-columns: repeat(1, 1fr);
+    }
+    .toggle-button-group[data-columns-md="2"] ul {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .toggle-button-group[data-columns-md="3"] ul {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    .toggle-button-group[data-columns-md="4"] ul {
+        grid-template-columns: repeat(4, 1fr);
+    }
+    .toggle-button-group[data-columns-md="5"] ul {
+        grid-template-columns: repeat(5, 1fr);
+    }
+    .toggle-button-group[data-columns-md="6"] ul {
+        grid-template-columns: repeat(6, 1fr);
+    }
+    .toggle-button-group[data-columns-md="7"] ul {
+        grid-template-columns: repeat(7, 1fr);
+    }
+    .toggle-button-group[data-columns-md="8"] ul {
+        grid-template-columns: repeat(8, 1fr);
+    }
+    .toggle-button-group[data-columns-md="9"] ul {
+        grid-template-columns: repeat(9, 1fr);
+    }
+    .toggle-button-group[data-columns-md="10"] ul {
+        grid-template-columns: repeat(10, 1fr);
+    }
+    .toggle-button-group[data-columns-md="11"] ul {
+        grid-template-columns: repeat(11, 1fr);
+    }
+    .toggle-button-group[data-columns-md="12"] ul {
+        grid-template-columns: repeat(12, 1fr);
+    }
+    .toggle-button-group[data-columns-md="13"] ul {
+        grid-template-columns: repeat(13, 1fr);
+    }
+    .toggle-button-group[data-columns-md="14"] ul {
+        grid-template-columns: repeat(14, 1fr);
+    }
+    .toggle-button-group[data-columns-md="15"] ul {
+        grid-template-columns: repeat(15, 1fr);
+    }
+    .toggle-button-group[data-columns-md="16"] ul {
+        grid-template-columns: repeat(16, 1fr);
+    }
 }
-.toggle-button-group[data-columns="6"] li {
-  width: calc(100% / 6 - 11px);
+@container toggle-buttons-container (inline-size >= 1280px) {
+    .toggle-button-group ul {
+        grid-template-columns: repeat(var(--row-min-toggle-buttons-xl), 1fr);
+    }
+    .toggle-button-group--list-layout ul {
+        grid-template-columns: repeat(var(--row-list-toggle-buttons-xl), 1fr);
+    }
+    .toggle-button-group--gallery-layout ul {
+        grid-template-columns: repeat(
+            var(--row-gallery-toggle-buttons-xl),
+            1fr
+        );
+    }
+    .toggle-button-group[data-columns-xl="1"] ul {
+        grid-template-columns: repeat(1, 1fr);
+    }
+    .toggle-button-group[data-columns-xl="2"] ul {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .toggle-button-group[data-columns-xl="3"] ul {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    .toggle-button-group[data-columns-xl="4"] ul {
+        grid-template-columns: repeat(4, 1fr);
+    }
+    .toggle-button-group[data-columns-xl="5"] ul {
+        grid-template-columns: repeat(5, 1fr);
+    }
+    .toggle-button-group[data-columns-xl="6"] ul {
+        grid-template-columns: repeat(6, 1fr);
+    }
+    .toggle-button-group[data-columns-xl="7"] ul {
+        grid-template-columns: repeat(7, 1fr);
+    }
+    .toggle-button-group[data-columns-xl="8"] ul {
+        grid-template-columns: repeat(8, 1fr);
+    }
+    .toggle-button-group[data-columns-xl="9"] ul {
+        grid-template-columns: repeat(9, 1fr);
+    }
+    .toggle-button-group[data-columns-xl="10"] ul {
+        grid-template-columns: repeat(10, 1fr);
+    }
+    .toggle-button-group[data-columns-xl="11"] ul {
+        grid-template-columns: repeat(11, 1fr);
+    }
+    .toggle-button-group[data-columns-xl="12"] ul {
+        grid-template-columns: repeat(12, 1fr);
+    }
+    .toggle-button-group[data-columns-xl="13"] ul {
+        grid-template-columns: repeat(13, 1fr);
+    }
+    .toggle-button-group[data-columns-xl="14"] ul {
+        grid-template-columns: repeat(14, 1fr);
+    }
+    .toggle-button-group[data-columns-xl="15"] ul {
+        grid-template-columns: repeat(15, 1fr);
+    }
+    .toggle-button-group[data-columns-xl="16"] ul {
+        grid-template-columns: repeat(16, 1fr);
+    }
 }
+
+/*# sourceMappingURL=toggle-button-group.css.map */