@mantine/core 7.16.3 → 8.0.0-alpha.0

package/styles.css

@@ -1,4 +1,7 @@
-/* ----- CSS reset ----- */
+:root {
+  color-scheme: var(--mantine-color-scheme);
+}
+
 *,
 *::before,
 *::after {
@@ -17,7 +20,6 @@ select {
   text-transform: none;
 }
 
-/* ----- Global styles ----- */
 body {
   margin: 0;
   font-family: var(--mantine-font-family);
@@ -29,7 +31,9 @@ body {
   -webkit-font-smoothing: var(--mantine-webkit-font-smoothing);
   -moz-osx-font-smoothing: var(--mantine-moz-font-smoothing);
 }
+
 @media screen and (max-device-width: 31.25em) {
+
 body {
     -webkit-text-size-adjust: 100%
 }
@@ -76,21 +80,12 @@ fieldset:disabled .mantine-active:active {
     transform: rotate(180deg);
 }
 
-/* ----- Default CSS variables ----- */
-
+/* stylelint-disable */
+/* This file is automatically generated, do not modify it directly. */
 :root {
-  color-scheme: var(--mantine-color-scheme);
-
-  --mantine-z-index-app: 100;
-  --mantine-z-index-modal: 200;
-  --mantine-z-index-popover: 300;
-  --mantine-z-index-overlay: 400;
-  --mantine-z-index-max: 9999;
-
   --mantine-scale: 1;
   --mantine-cursor-type: default;
   --mantine-webkit-font-smoothing: antialiased;
-  --mantine-color-scheme: light dark;
   --mantine-moz-font-smoothing: grayscale;
   --mantine-color-white: #fff;
   --mantine-color-black: #000;
@@ -102,17 +97,8 @@ fieldset:disabled .mantine-active:active {
   --mantine-font-family-headings: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
     Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
   --mantine-heading-font-weight: 700;
+  --mantine-heading-text-wrap: wrap;
   --mantine-radius-default: calc(0.25rem * var(--mantine-scale));
-  --mantine-primary-color-0: var(--mantine-color-blue-0);
-  --mantine-primary-color-1: var(--mantine-color-blue-1);
-  --mantine-primary-color-2: var(--mantine-color-blue-2);
-  --mantine-primary-color-3: var(--mantine-color-blue-3);
-  --mantine-primary-color-4: var(--mantine-color-blue-4);
-  --mantine-primary-color-5: var(--mantine-color-blue-5);
-  --mantine-primary-color-6: var(--mantine-color-blue-6);
-  --mantine-primary-color-7: var(--mantine-color-blue-7);
-  --mantine-primary-color-8: var(--mantine-color-blue-8);
-  --mantine-primary-color-9: var(--mantine-color-blue-9);
   --mantine-primary-color-filled: var(--mantine-color-blue-filled);
   --mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);
   --mantine-primary-color-light: var(--mantine-color-blue-light);
@@ -171,6 +157,16 @@ fieldset:disabled .mantine-active:active {
   --mantine-radius-md: calc(0.5rem * var(--mantine-scale));
   --mantine-radius-lg: calc(1rem * var(--mantine-scale));
   --mantine-radius-xl: calc(2rem * var(--mantine-scale));
+  --mantine-primary-color-0: var(--mantine-color-blue-0);
+  --mantine-primary-color-1: var(--mantine-color-blue-1);
+  --mantine-primary-color-2: var(--mantine-color-blue-2);
+  --mantine-primary-color-3: var(--mantine-color-blue-3);
+  --mantine-primary-color-4: var(--mantine-color-blue-4);
+  --mantine-primary-color-5: var(--mantine-color-blue-5);
+  --mantine-primary-color-6: var(--mantine-color-blue-6);
+  --mantine-primary-color-7: var(--mantine-color-blue-7);
+  --mantine-primary-color-8: var(--mantine-color-blue-8);
+  --mantine-primary-color-9: var(--mantine-color-blue-9);
   --mantine-color-dark-0: #c9c9c9;
   --mantine-color-dark-1: #b8b8b8;
   --mantine-color-dark-2: #828282;
@@ -330,7 +326,6 @@ fieldset:disabled .mantine-active:active {
   --mantine-h6-line-height: 1.5;
   --mantine-h6-font-weight: 700;
 }
-
 :root[data-mantine-color-scheme='dark'] {
   --mantine-color-scheme: dark;
   --mantine-primary-color-contrast: var(--mantine-color-white);
@@ -347,12 +342,12 @@ fieldset:disabled .mantine-active:active {
   --mantine-color-dimmed: var(--mantine-color-dark-2);
   --mantine-color-dark-text: var(--mantine-color-dark-4);
   --mantine-color-dark-filled: var(--mantine-color-dark-8);
-  --mantine-color-dark-filled-hover: var(--mantine-color-dark-7);
-  --mantine-color-dark-light: rgba(36, 36, 36, 0.15);
-  --mantine-color-dark-light-hover: rgba(36, 36, 36, 0.2);
+  --mantine-color-dark-filled-hover: var(--mantine-color-dark-9);
+  --mantine-color-dark-light: rgba(46, 46, 46, 0.15);
+  --mantine-color-dark-light-hover: rgba(46, 46, 46, 0.2);
   --mantine-color-dark-light-color: var(--mantine-color-dark-3);
   --mantine-color-dark-outline: var(--mantine-color-dark-4);
-  --mantine-color-dark-outline-hover: rgba(36, 36, 36, 0.05);
+  --mantine-color-dark-outline-hover: rgba(66, 66, 66, 0.05);
   --mantine-color-gray-text: var(--mantine-color-gray-4);
   --mantine-color-gray-filled: var(--mantine-color-gray-8);
   --mantine-color-gray-filled-hover: var(--mantine-color-gray-9);
@@ -461,26 +456,26 @@ fieldset:disabled .mantine-active:active {
 
 :root[data-mantine-color-scheme='light'] {
   --mantine-color-scheme: light;
-  --mantine-color-bright: var(--mantine-color-black);
-  --mantine-color-text: var(--mantine-color-black);
-  --mantine-color-body: var(--mantine-color-white);
   --mantine-primary-color-contrast: var(--mantine-color-white);
+  --mantine-color-bright: var(--mantine-color-black);
+  --mantine-color-text: #000;
+  --mantine-color-body: #fff;
   --mantine-color-error: var(--mantine-color-red-6);
   --mantine-color-placeholder: var(--mantine-color-gray-5);
-  --mantine-color-anchor: var(--mantine-primary-color-filled);
+  --mantine-color-anchor: var(--mantine-color-blue-6);
   --mantine-color-default: var(--mantine-color-white);
   --mantine-color-default-hover: var(--mantine-color-gray-0);
-  --mantine-color-default-color: var(--mantine-color-gray-9);
+  --mantine-color-default-color: var(--mantine-color-black);
   --mantine-color-default-border: var(--mantine-color-gray-4);
   --mantine-color-dimmed: var(--mantine-color-gray-6);
   --mantine-color-dark-text: var(--mantine-color-dark-filled);
   --mantine-color-dark-filled: var(--mantine-color-dark-6);
   --mantine-color-dark-filled-hover: var(--mantine-color-dark-7);
-  --mantine-color-dark-light: rgba(56, 56, 56, 0.1);
-  --mantine-color-dark-light-hover: rgba(56, 56, 56, 0.12);
+  --mantine-color-dark-light: rgba(46, 46, 46, 0.1);
+  --mantine-color-dark-light-hover: rgba(46, 46, 46, 0.12);
   --mantine-color-dark-light-color: var(--mantine-color-dark-6);
   --mantine-color-dark-outline: var(--mantine-color-dark-6);
-  --mantine-color-dark-outline-hover: rgba(56, 56, 56, 0.05);
+  --mantine-color-dark-outline-hover: rgba(46, 46, 46, 0.05);
   --mantine-color-gray-text: var(--mantine-color-gray-filled);
   --mantine-color-gray-filled: var(--mantine-color-gray-6);
   --mantine-color-gray-filled-hover: var(--mantine-color-gray-7);
@@ -596,6 +591,7 @@ fieldset:disabled .mantine-active:active {
 
 .m_c0783ff9 {
   scrollbar-width: none;
+  overscroll-behavior: var(--scrollarea-over-scroll-behavior);
   -ms-overflow-style: none;
   -webkit-overflow-scrolling: touch;
   width: 100%;
@@ -743,6 +739,10 @@ fieldset:disabled .mantine-active:active {
     display: none;
   }
 
+.m_b1336c6 {
+  min-width: 100%;
+}
+
 .m_87cf2631 {
   background-color: transparent;
   cursor: pointer;
@@ -1973,6 +1973,24 @@ fieldset:disabled .mantine-active:active {
   }
 }
 
+  .m_849cf0da:where([data-underline='not-hover']) {
+    text-decoration: underline;
+  }
+
+  @media (hover: hover) {
+
+  .m_849cf0da:where([data-underline='not-hover']):hover {
+      text-decoration: none;
+  }
+}
+
+  @media (hover: none) {
+
+  .m_849cf0da:where([data-underline='not-hover']):active {
+      text-decoration: none;
+  }
+}
+
   .m_849cf0da:where([data-underline='always']) {
     text-decoration: underline;
   }
@@ -3651,13 +3669,11 @@ fieldset:disabled .m_d3ea56bb,
 }
 
   :where([data-mantine-color-scheme='light']) .m_b183c0a2 {
-    background-color: var(--code-bg, var(--mantine-color-gray-1));
-    color: var(--mantine-color-black);
+    background-color: var(--code-bg, var(--mantine-color-gray-0));
 }
 
   :where([data-mantine-color-scheme='dark']) .m_b183c0a2 {
-    background-color: var(--code-bg, var(--mantine-color-dark-5));
-    color: var(--mantine-color-white);
+    background-color: var(--code-bg, var(--mantine-color-dark-6));
 }
 
   .m_b183c0a2[data-block] {
@@ -4147,7 +4163,6 @@ fieldset:disabled .m_d3ea56bb,
 
 .m_9e117634 {
   display: block;
-  flex: 0;
   object-fit: var(--image-object-fit, cover);
   width: 100%;
   border-radius: var(--image-radius, 0);
@@ -4226,22 +4241,16 @@ fieldset:disabled .m_d3ea56bb,
   --kbd-fz-xl: calc(1.25rem * var(--mantine-scale));
   --kbd-fz: var(--kbd-fz-sm);
 
-  --kbd-padding-xs: calc(0.125rem * var(--mantine-scale)) calc(0.25rem * var(--mantine-scale));
-  --kbd-padding-sm: calc(0.1875rem * var(--mantine-scale)) calc(0.3125rem * var(--mantine-scale));
-  --kbd-padding-md: calc(0.25rem * var(--mantine-scale)) calc(0.4375rem * var(--mantine-scale));
-  --kbd-padding-lg: calc(0.3125rem * var(--mantine-scale)) calc(0.5625rem * var(--mantine-scale));
-  --kbd-padding-xl: calc(0.5rem * var(--mantine-scale)) calc(0.875rem * var(--mantine-scale));
-  --kbd-padding: var(--kbd-padding-sm);
-
   font-family: var(--mantine-font-family-monospace);
   line-height: var(--mantine-line-height);
   font-weight: 700;
-  padding: var(--kbd-padding);
   font-size: var(--kbd-fz);
   border-radius: var(--mantine-radius-sm);
   border: calc(0.0625rem * var(--mantine-scale)) solid;
   border-bottom-width: calc(0.1875rem * var(--mantine-scale));
   unicode-bidi: embed;
+  text-align: center;
+  padding: 0.12em 0.45em;
 }
 
   :where([data-mantine-color-scheme='light']) .m_dc6f14e2 {
@@ -4368,14 +4377,18 @@ fieldset:disabled .m_d3ea56bb,
     cursor: not-allowed;
   }
 
-:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where([data-hovered]):where(:not(:disabled, [data-disabled])) {
+:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where(:hover, :focus):where(:not(:disabled, [data-disabled])) {
         background-color: var(--menu-item-hover, var(--mantine-color-gray-1));
 }
 
-:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where([data-hovered]):where(:not(:disabled, [data-disabled])) {
+:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where(:hover, :focus):where(:not(:disabled, [data-disabled])) {
         background-color: var(--menu-item-hover, var(--mantine-color-dark-4));
 }
 
+.m_99ac2aa1:where([data-sub-menu-item]) {
+    padding-inline-end: calc(0.3125rem * var(--mantine-scale));
+  }
+
 .m_5476e0d3 {
   flex: 1;
 }
@@ -4394,6 +4407,14 @@ fieldset:disabled .m_d3ea56bb,
     margin-inline-start: var(--mantine-spacing-xs);
   }
 
+.m_b85b0bed {
+  transform: rotate(-90deg);
+}
+
+:where([dir="rtl"]) .m_b85b0bed {
+    transform: rotate(90deg);
+}
+
 .m_9df02822 {
   --modal-size-xs: calc(20rem * var(--mantine-scale));
   --modal-size-sm: calc(23.75rem * var(--mantine-scale));
@@ -5636,11 +5657,11 @@ fieldset:disabled .m_d3ea56bb,
 }
 
 .m_cf365364 {
-  --sc-padding-xs: calc(0.1875rem * var(--mantine-scale)) calc(0.375rem * var(--mantine-scale));
-  --sc-padding-sm: calc(0.3125rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale));
-  --sc-padding-md: calc(0.4375rem * var(--mantine-scale)) calc(0.875rem * var(--mantine-scale));
-  --sc-padding-lg: calc(0.5625rem * var(--mantine-scale)) calc(1rem * var(--mantine-scale));
-  --sc-padding-xl: calc(0.75rem * var(--mantine-scale)) calc(1.25rem * var(--mantine-scale));
+  --sc-padding-xs: calc(0.125rem * var(--mantine-scale)) calc(0.375rem * var(--mantine-scale));
+  --sc-padding-sm: calc(0.1875rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale));
+  --sc-padding-md: calc(0.25rem * var(--mantine-scale)) calc(0.875rem * var(--mantine-scale));
+  --sc-padding-lg: calc(0.4375rem * var(--mantine-scale)) calc(1rem * var(--mantine-scale));
+  --sc-padding-xl: calc(0.625rem * var(--mantine-scale)) calc(1.25rem * var(--mantine-scale));
 
   --sc-transition-duration: 200ms;
   --sc-padding: var(--sc-padding-sm);
@@ -6493,11 +6514,11 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   --switch-label-font-size-lg: calc(0.5625rem * var(--mantine-scale));
   --switch-label-font-size-xl: calc(0.6875rem * var(--mantine-scale));
 
-  --switch-track-label-padding-xs: calc(0.0625rem * var(--mantine-scale));
-  --switch-track-label-padding-sm: calc(0.125rem * var(--mantine-scale));
-  --switch-track-label-padding-md: calc(0.125rem * var(--mantine-scale));
+  --switch-track-label-padding-xs: calc(0.125rem * var(--mantine-scale));
+  --switch-track-label-padding-sm: calc(0.15625rem * var(--mantine-scale));
+  --switch-track-label-padding-md: calc(0.1875rem * var(--mantine-scale));
   --switch-track-label-padding-lg: calc(0.1875rem * var(--mantine-scale));
-  --switch-track-label-padding-xl: calc(0.1875rem * var(--mantine-scale));
+  --switch-track-label-padding-xl: calc(0.21875rem * var(--mantine-scale));
 
   --switch-height: var(--switch-height-sm);
   --switch-width: var(--switch-width-sm);
@@ -6528,7 +6549,6 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   position: relative;
   border-radius: var(--switch-radius);
   background-color: var(--switch-bg);
-  border: 1px solid var(--switch-bd);
   height: var(--switch-height);
   min-width: var(--switch-width);
   margin: 0;
@@ -6558,35 +6578,27 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
 
 .m_926b4011:checked + .m_9307d992 {
     --switch-bg: var(--switch-color);
-    --switch-bd: var(--switch-color);
     --switch-text-color: var(--mantine-color-white);
   }
 
 .m_926b4011:disabled + .m_9307d992,
   .m_926b4011[data-disabled] + .m_9307d992 {
     --switch-bg: var(--switch-disabled-color);
-    --switch-bd: var(--switch-disabled-color);
     --switch-cursor: not-allowed;
   }
 
 [data-mantine-color-scheme='light'] .m_9307d992 {
-    --switch-bg: var(--mantine-color-gray-2);
-    --switch-bd: var(--mantine-color-gray-3);
+    --switch-bg: var(--mantine-color-gray-3);
     --switch-text-color: var(--mantine-color-gray-6);
     --switch-disabled-color: var(--mantine-color-gray-2);
 }
 
 [data-mantine-color-scheme='dark'] .m_9307d992 {
-    --switch-bg: var(--mantine-color-dark-6);
-    --switch-bd: var(--mantine-color-dark-4);
+    --switch-bg: var(--mantine-color-dark-5);
     --switch-text-color: var(--mantine-color-dark-1);
     --switch-disabled-color: var(--mantine-color-dark-4);
 }
 
-.m_9307d992[data-error] {
-    --switch-bd: var(--mantine-color-error);
-  }
-
 .m_9307d992[data-label-position='left'] {
     --switch-order: 2;
   }
@@ -6599,33 +6611,39 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   background-color: var(--switch-thumb-bg, var(--mantine-color-white));
   height: var(--switch-thumb-size);
   width: var(--switch-thumb-size);
-  border: 1px solid var(--switch-thumb-bd);
   inset-inline-start: var(--switch-thumb-start, var(--switch-track-label-padding));
   transition: inset-inline-start 150ms ease;
 }
 
+.m_93039a1d:where([data-with-thumb-indicator])::before {
+    content: '';
+    width: 40%;
+    height: 40%;
+    background-color: var(--switch-bg);
+    position: absolute;
+    border-radius: var(--switch-radius);
+    inset: 50%;
+    transform: translate(-50%, -50%);
+  }
+
 .m_93039a1d > * {
     margin: auto;
   }
 
 .m_926b4011:checked + * > .m_93039a1d {
     --switch-thumb-start: calc(100% - var(--switch-thumb-size) - var(--switch-track-label-padding));
-    --switch-thumb-bd: var(--mantine-color-white);
   }
 
 .m_926b4011:disabled + * > .m_93039a1d,
   .m_926b4011[data-disabled] + * > .m_93039a1d {
-    --switch-thumb-bd: var(--switch-thumb-bg-disabled);
     --switch-thumb-bg: var(--switch-thumb-bg-disabled);
   }
 
 [data-mantine-color-scheme='light'] .m_93039a1d {
-    --switch-thumb-bd: var(--mantine-color-gray-3);
     --switch-thumb-bg-disabled: var(--mantine-color-gray-0);
 }
 
 [data-mantine-color-scheme='dark'] .m_93039a1d {
-    --switch-thumb-bd: var(--mantine-color-white);
     --switch-thumb-bg-disabled: var(--mantine-color-dark-3);
 }
 
@@ -6810,11 +6828,17 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
     color: var(--toc-color);
   }
 
-.m_89d60db1 {
+[data-mantine-color-scheme='light'] .m_89d60db1 {
+    --tab-border-color: var(--mantine-color-gray-3);
+}
+  [data-mantine-color-scheme='dark'] .m_89d60db1 {
+    --tab-border-color: var(--mantine-color-dark-4);
+}
+  .m_89d60db1 {
+
   display: var(--tabs-display);
   flex-direction: var(--tabs-flex-direction);
 
-  --tab-justify: flex-start;
   --tabs-list-direction: row;
   --tabs-panel-grow: unset;
   --tabs-display: block;
@@ -6878,18 +6902,6 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
         --tab-radius: var(--tabs-radius) 0 0 var(--tabs-radius);
 }
 
-  [data-mantine-color-scheme='light'] .m_89d60db1 {
-    --tab-border-color: var(--mantine-color-gray-3);
-}
-
-  [data-mantine-color-scheme='dark'] .m_89d60db1 {
-    --tab-border-color: var(--mantine-color-dark-4);
-}
-
-  .m_89d60db1[data-orientation='horizontal'] {
-    --tab-justify: center;
-  }
-
   .m_89d60db1[data-variant='default'] {
     --tabs-list-border-width: calc(0.125rem * var(--mantine-scale));
   }
@@ -6924,12 +6936,10 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   justify-content: var(--tabs-justify, flex-start);
   flex-direction: var(--tabs-list-direction);
   gap: var(--tabs-list-gap);
-
-  --tab-grow: unset;
 }
 
-.m_89d33d6d[data-grow] {
-    --tab-grow: 1;
+.m_89d33d6d:where([data-grow]) .m_4ec4dce6 {
+    flex: 1;
   }
 
 .m_b0c91715 {
@@ -6946,12 +6956,9 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   align-items: center;
   line-height: 1;
   user-select: none;
-  flex-grow: var(--tab-grow);
-  justify-content: var(--tab-justify);
 }
 
-.m_4ec4dce6:disabled,
-  .m_4ec4dce6[data-disabled] {
+.m_4ec4dce6:where(:disabled, [data-disabled]) {
     opacity: 0.5;
     cursor: not-allowed;
   }
@@ -6964,27 +6971,15 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-left: var(--tab-section-margin-left, 0);
-  margin-right: var(--tab-section-margin-right, 0);
-}
-
-.m_fc420b1f[data-position='left']:not(:only-child) {
-      --tab-section-margin-right: var(--mantine-spacing-xs);
-    }
-
-[dir="rtl"] .m_fc420b1f[data-position='left']:not(:only-child) {
-        --tab-section-margin-right: 0rem;
-        --tab-section-margin-left: var(--mantine-spacing-xs);
 }
 
-.m_fc420b1f[data-position='right']:not(:only-child) {
-      --tab-section-margin-left: var(--mantine-spacing-xs);
-    }
+.m_fc420b1f:where([data-position='left']:not(:only-child)) {
+    margin-inline-end: var(--mantine-spacing-xs);
+  }
 
-[dir="rtl"] .m_fc420b1f[data-position='right']:not(:only-child) {
-        --tab-section-margin-left: 0rem;
-        --tab-section-margin-right: var(--mantine-spacing-xs);
-}
+.m_fc420b1f:where([data-position='right']:not(:only-child)) {
+    margin-inline-start: var(--mantine-spacing-xs);
+  }
 
 /*************************************** default variant ***************************************/
 .m_576c9d4 {
@@ -6993,9 +6988,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
 .m_576c9d4::before {
     content: '';
     position: absolute;
-    border-color: var(--tab-border-color);
-    border-width: var(--tabs-list-border-size);
-    border-style: solid;
+    border: 1px solid var(--tab-border-color);
     bottom: var(--tabs-list-line-bottom);
     inset-inline-start: var(--tabs-list-line-start);
     inset-inline-end: var(--tabs-list-line-end);
@@ -7007,9 +7000,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   border-width: var(--tab-border-width);
   border-style: solid;
   border-color: transparent;
-  background-color: var(--tab-bg);
-
-  --tab-bg: transparent;
+  background-color: transparent;
 }
 
 .m_539e827b:where([data-active]) {
@@ -7017,10 +7008,9 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   }
 
 @media (hover: hover) {
-
-  .m_539e827b:hover {
-    --tab-bg: var(--tab-hover-color);
-  }
+    .m_539e827b:hover {
+    background-color: var(--tab-hover-color);
+    }
 
     .m_539e827b:hover:where(:not([data-active])) {
       border-color: var(--tab-border-color);
@@ -7028,10 +7018,9 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
 }
 
 @media (hover: none) {
-
-  .m_539e827b:active {
-    --tab-bg: var(--tab-hover-color);
-  }
+    .m_539e827b:active {
+    background-color: var(--tab-hover-color);
+    }
 
     .m_539e827b:active:where(:not([data-active])) {
       border-color: var(--tab-border-color);
@@ -7039,17 +7028,15 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
 }
 
 @media (hover: hover) {
-
-  .m_539e827b:disabled:hover, .m_539e827b[data-disabled]:hover {
-      --tab-bg: transparent;
-  }
+    .m_539e827b:disabled:hover, .m_539e827b[data-disabled]:hover {
+      background-color: transparent;
+    }
 }
 
 @media (hover: none) {
-
-  .m_539e827b:disabled:active, .m_539e827b[data-disabled]:active {
-      --tab-bg: transparent;
-  }
+    .m_539e827b:disabled:active, .m_539e827b[data-disabled]:active {
+      background-color: transparent;
+    }
 }
 
 /*************************************** outline variant ***************************************/
@@ -7181,32 +7168,28 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   --tab-color: inherit;
 }
 @media (hover: hover) {
-
-  .m_c3381914:not([data-disabled]):hover {
+    .m_c3381914:not([data-disabled]):hover {
       --tab-bg: var(--tab-hover-color);
-  }
+    }
 }
 @media (hover: none) {
-
-  .m_c3381914:not([data-disabled]):active {
+    .m_c3381914:not([data-disabled]):active {
       --tab-bg: var(--tab-hover-color);
-  }
+    }
 }
 .m_c3381914[data-active][data-active] {
     --tab-bg: var(--tabs-color);
     --tab-color: var(--tabs-text-color, var(--mantine-color-white));
   }
 @media (hover: hover) {
-
-  .m_c3381914[data-active][data-active]:hover {
+    .m_c3381914[data-active][data-active]:hover {
       --tab-bg: var(--tabs-color);
-  }
+    }
 }
 @media (hover: none) {
-
-  .m_c3381914[data-active][data-active]:active {
+    .m_c3381914[data-active][data-active]:active {
       --tab-bg: var(--tabs-color);
-  }
+    }
 }
 
 .m_7341320d {