@ojiepermana/angular 22.0.1 → 22.0.27

package/theme/styles/integrations/material/select.css

@@ -1,175 +0,0 @@
-/**
- * Angular Material select overrides.
- *
- * Global Material tokens handle typography and colors; this file tightens the
- * trigger, overlay panel, and option rows into the local shadcn-like surface.
- */
-@layer tokens {
-  :root,
-  [data-style='default'] {
-    --mat-select-container-elevation-shadow: var(--shadow-md);
-    --mat-select-panel-background-color: hsl(var(--popover));
-    --mat-select-enabled-trigger-text-color: hsl(var(--foreground));
-    --mat-select-placeholder-text-color: hsl(var(--muted-foreground));
-    --mat-select-enabled-arrow-color: hsl(var(--muted-foreground));
-    --mat-select-focused-arrow-color: hsl(var(--ring));
-
-    --ui-mat-select-border-color: hsl(var(--border));
-    --ui-mat-select-border-width: var(--border-width);
-    --ui-mat-select-active-border-color: hsl(var(--ring));
-    --ui-mat-select-panel-radius: var(--radius-md);
-    --ui-mat-select-option-radius: 0;
-    --ui-mat-select-option-min-height: 2.25rem;
-    --ui-mat-select-option-padding-x: 0.5rem;
-    --ui-mat-select-option-gap: 0.5rem;
-    --ui-mat-select-hover-background: hsl(var(--accent) / 0.72);
-    --ui-mat-select-focus-background: hsl(var(--accent));
-    --ui-mat-select-selected-background: hsl(var(--accent));
-    --ui-mat-select-selected-foreground: hsl(var(--accent-foreground));
-  }
-
-  [data-style='sharp'] {
-    --mat-select-container-elevation-shadow: none;
-    --ui-mat-select-panel-radius: 0;
-    --ui-mat-select-hover-background: hsl(var(--muted));
-    --ui-mat-select-focus-background: hsl(var(--muted));
-    --ui-mat-select-selected-background: hsl(var(--muted));
-  }
-
-  [data-style='brutal'] {
-    --mat-select-container-elevation-shadow: var(--shadow-lg);
-    --mat-select-enabled-arrow-color: hsl(var(--foreground));
-    --mat-select-focused-arrow-color: hsl(var(--foreground));
-
-    --ui-mat-select-border-color: hsl(var(--foreground));
-    --ui-mat-select-active-border-color: hsl(var(--foreground));
-    --ui-mat-select-panel-radius: 0;
-    --ui-mat-select-hover-background: hsl(var(--primary) / 0.14);
-    --ui-mat-select-focus-background: hsl(var(--primary));
-    --ui-mat-select-selected-background: hsl(var(--primary));
-    --ui-mat-select-selected-foreground: hsl(var(--primary-foreground));
-  }
-
-  [data-style='soft'] {
-    --mat-select-container-elevation-shadow: var(--shadow-lg);
-    --ui-mat-select-border-color: hsl(var(--border) / 0.72);
-    --ui-mat-select-active-border-color: hsl(var(--ring) / 0.8);
-    --ui-mat-select-panel-radius: var(--radius-lg);
-    --ui-mat-select-hover-background: hsl(var(--accent) / 0.6);
-    --ui-mat-select-focus-background: hsl(var(--accent) / 0.82);
-    --ui-mat-select-selected-background: hsl(var(--accent) / 0.82);
-  }
-}
-
-@layer components {
-  .mat-mdc-form-field:has(.mat-mdc-select.mat-select-open) .mat-mdc-text-field-wrapper {
-    @apply relative z-10;
-  }
-
-  .mat-mdc-form-field:has(.mat-mdc-select.mat-select-open) .mdc-notched-outline__leading,
-  .mat-mdc-form-field:has(.mat-mdc-select.mat-select-open) .mdc-notched-outline__notch,
-  .mat-mdc-form-field:has(.mat-mdc-select.mat-select-open) .mdc-notched-outline__trailing {
-    @apply border-ring;
-
-    border-color: var(--ui-mat-select-active-border-color) !important;
-    border-width: var(--ui-mat-select-border-width) !important;
-  }
-
-  .mat-mdc-form-field:has(.mat-mdc-select.mat-select-open) .mdc-notched-outline__leading {
-    @apply rounded-bl-none;
-
-    border-bottom-color: var(--ui-mat-select-border-color) !important;
-    border-bottom-left-radius: 0 !important;
-  }
-
-  .mat-mdc-form-field:has(.mat-mdc-select.mat-select-open) .mdc-notched-outline__trailing {
-    @apply rounded-br-none;
-
-    border-bottom-color: var(--ui-mat-select-border-color) !important;
-    border-bottom-right-radius: 0 !important;
-  }
-
-  .mat-mdc-select-trigger {
-    @apply min-w-0 gap-2;
-  }
-
-  .mat-mdc-select-value,
-  .mat-mdc-select-value-text,
-  .mat-mdc-select-min-line {
-    @apply min-w-0 truncate;
-  }
-
-  .mat-mdc-select-arrow-wrapper {
-    @apply transition-transform;
-  }
-
-  .cdk-overlay-pane div.mat-mdc-select-panel {
-    --mat-option-label-text-color: hsl(var(--popover-foreground));
-    --mat-option-hover-state-layer-color: var(--ui-mat-select-hover-background);
-    --mat-option-focus-state-layer-color: var(--ui-mat-select-focus-background);
-    --mat-option-selected-state-layer-color: var(--ui-mat-select-selected-background);
-    --mat-option-selected-state-label-text-color: var(--ui-mat-select-selected-foreground);
-
-    @apply border p-1 text-foreground;
-
-    border-color: var(--ui-mat-select-border-color) !important;
-    border-width: var(--ui-mat-select-border-width) !important;
-    border-radius: var(--ui-mat-select-panel-radius) !important;
-    background-color: var(--mat-select-panel-background-color) !important;
-    box-shadow: var(--mat-select-container-elevation-shadow) !important;
-  }
-
-  .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel {
-    @apply rounded-t-none border-ring;
-
-    margin-top: calc(var(--ui-mat-select-border-width) * -1);
-    border-color: var(--ui-mat-select-active-border-color) !important;
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
-  }
-
-  .cdk-overlay-pane.mat-mdc-select-panel-above div.mat-mdc-select-panel {
-    @apply rounded-b-none border-ring;
-
-    margin-bottom: calc(var(--ui-mat-select-border-width) * -1);
-    border-color: var(--ui-mat-select-active-border-color) !important;
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-  }
-
-  .cdk-overlay-pane div.mat-mdc-select-panel .mat-mdc-option.mdc-list-item {
-    @apply min-h-9 px-2 text-sm transition-colors;
-
-    min-height: var(--ui-mat-select-option-min-height);
-    border-radius: var(--ui-mat-select-option-radius);
-    gap: var(--ui-mat-select-option-gap);
-    padding-inline: var(--ui-mat-select-option-padding-x);
-  }
-
-  .cdk-overlay-pane div.mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text {
-    @apply flex min-w-0 items-center gap-2 truncate;
-  }
-
-  .cdk-overlay-pane div.mat-mdc-select-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),
-  .cdk-overlay-pane div.mat-mdc-select-panel .mat-mdc-option.mat-mdc-option-active.mdc-list-item {
-    color: var(--ui-mat-select-selected-foreground);
-  }
-
-  .cdk-overlay-pane div.mat-mdc-select-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-    color: var(--ui-mat-select-selected-foreground);
-  }
-
-  .cdk-overlay-pane div.mat-mdc-select-panel .mat-mdc-optgroup-label {
-    @apply min-h-8 px-2 text-xs font-semibold uppercase text-muted-foreground;
-
-    letter-spacing: 0.08em;
-  }
-
-  [data-style='brutal'] .cdk-overlay-pane div.mat-mdc-select-panel {
-    @apply border-2;
-  }
-
-  [data-style='sharp'] .cdk-overlay-pane div.mat-mdc-select-panel {
-    @apply shadow-none;
-  }
-}

package/theme/styles/integrations/material/slide-toggle.css

@@ -1,234 +0,0 @@
-/**
- * Angular Material slide-toggle overrides.
- *
- * MatSlideToggle keeps its button-based switch semantics, form integration,
- * label projection, and keyboard handling while the visible switch follows
- * local theme tokens.
- */
-@layer tokens {
-  :root,
-  [data-style='default'] {
-    --ui-mat-slide-toggle-track-border-color: hsl(var(--border));
-    --ui-mat-slide-toggle-track-border-width: var(--border-width);
-    --ui-mat-slide-toggle-track-radius: 9999px;
-    --ui-mat-slide-toggle-handle-radius: 9999px;
-    --ui-mat-slide-toggle-focus-outline-color: hsl(var(--ring));
-
-    --mat-slide-toggle-track-width: 2.25rem;
-    --mat-slide-toggle-track-height: 1.25rem;
-    --mat-slide-toggle-track-shape: var(--ui-mat-slide-toggle-track-radius);
-    --mat-slide-toggle-track-outline-color: var(--ui-mat-slide-toggle-track-border-color);
-    --mat-slide-toggle-track-outline-width: var(--ui-mat-slide-toggle-track-border-width);
-    --mat-slide-toggle-selected-track-outline-color: transparent;
-    --mat-slide-toggle-selected-track-outline-width: var(--ui-mat-slide-toggle-track-border-width);
-    --mat-slide-toggle-disabled-unselected-track-outline-color: hsl(var(--border) / 0.72);
-    --mat-slide-toggle-disabled-unselected-track-outline-width: var(--ui-mat-slide-toggle-track-border-width);
-
-    --mat-slide-toggle-handle-width: 1rem;
-    --mat-slide-toggle-handle-height: 1rem;
-    --mat-slide-toggle-handle-shape: var(--ui-mat-slide-toggle-handle-radius);
-    --mat-slide-toggle-selected-handle-size: 1rem;
-    --mat-slide-toggle-unselected-handle-size: 1rem;
-    --mat-slide-toggle-with-icon-handle-size: 1rem;
-    --mat-slide-toggle-pressed-handle-size: 1.125rem;
-    --mat-slide-toggle-selected-handle-horizontal-margin: 0;
-    --mat-slide-toggle-selected-with-icon-handle-horizontal-margin: 0;
-    --mat-slide-toggle-selected-pressed-handle-horizontal-margin: 0;
-    --mat-slide-toggle-unselected-handle-horizontal-margin: 0;
-    --mat-slide-toggle-unselected-with-icon-handle-horizontal-margin: 0;
-    --mat-slide-toggle-unselected-pressed-handle-horizontal-margin: 0;
-    --mat-slide-toggle-handle-elevation-shadow: 0 1px 2px hsl(var(--foreground) / 0.14);
-    --mat-slide-toggle-disabled-handle-elevation-shadow: none;
-
-    --mat-slide-toggle-selected-track-color: hsl(var(--primary));
-    --mat-slide-toggle-selected-hover-track-color: hsl(var(--primary));
-    --mat-slide-toggle-selected-focus-track-color: hsl(var(--primary));
-    --mat-slide-toggle-selected-pressed-track-color: hsl(var(--primary));
-    --mat-slide-toggle-selected-handle-color: hsl(var(--primary-foreground));
-    --mat-slide-toggle-selected-hover-handle-color: hsl(var(--primary-foreground));
-    --mat-slide-toggle-selected-focus-handle-color: hsl(var(--primary-foreground));
-    --mat-slide-toggle-selected-pressed-handle-color: hsl(var(--primary-foreground));
-
-    --mat-slide-toggle-unselected-track-color: hsl(var(--input));
-    --mat-slide-toggle-unselected-hover-track-color: hsl(var(--input));
-    --mat-slide-toggle-unselected-focus-track-color: hsl(var(--input));
-    --mat-slide-toggle-unselected-pressed-track-color: hsl(var(--input));
-    --mat-slide-toggle-unselected-handle-color: hsl(var(--background));
-    --mat-slide-toggle-unselected-hover-handle-color: hsl(var(--background));
-    --mat-slide-toggle-unselected-focus-handle-color: hsl(var(--background));
-    --mat-slide-toggle-unselected-pressed-handle-color: hsl(var(--background));
-    --mat-slide-toggle-handle-surface-color: hsl(var(--background));
-
-    --mat-slide-toggle-selected-icon-color: transparent;
-    --mat-slide-toggle-disabled-selected-icon-color: transparent;
-    --mat-slide-toggle-unselected-icon-color: transparent;
-    --mat-slide-toggle-disabled-unselected-icon-color: transparent;
-    --mat-slide-toggle-selected-icon-size: 0;
-    --mat-slide-toggle-unselected-icon-size: 0;
-
-    --mat-slide-toggle-selected-hover-state-layer-color: hsl(var(--primary));
-    --mat-slide-toggle-selected-focus-state-layer-color: hsl(var(--ring));
-    --mat-slide-toggle-selected-pressed-state-layer-color: hsl(var(--primary));
-    --mat-slide-toggle-selected-hover-state-layer-opacity: 0.12;
-    --mat-slide-toggle-selected-focus-state-layer-opacity: 0.18;
-    --mat-slide-toggle-selected-pressed-state-layer-opacity: 0.18;
-    --mat-slide-toggle-unselected-hover-state-layer-color: hsl(var(--foreground));
-    --mat-slide-toggle-unselected-focus-state-layer-color: hsl(var(--ring));
-    --mat-slide-toggle-unselected-pressed-state-layer-color: hsl(var(--foreground));
-    --mat-slide-toggle-unselected-hover-state-layer-opacity: 0.1;
-    --mat-slide-toggle-unselected-focus-state-layer-opacity: 0.18;
-    --mat-slide-toggle-unselected-pressed-state-layer-opacity: 0.14;
-    --mat-slide-toggle-state-layer-size: 2rem;
-    --mat-slide-toggle-touch-target-display: block;
-    --mat-slide-toggle-touch-target-size: 2.75rem;
-
-    --mat-slide-toggle-disabled-track-opacity: 1;
-    --mat-slide-toggle-disabled-handle-opacity: 0.55;
-    --mat-slide-toggle-disabled-selected-handle-opacity: 0.55;
-    --mat-slide-toggle-disabled-unselected-handle-opacity: 0.55;
-    --mat-slide-toggle-disabled-selected-track-color: hsl(var(--muted));
-    --mat-slide-toggle-disabled-unselected-track-color: hsl(var(--muted));
-    --mat-slide-toggle-disabled-selected-handle-color: hsl(var(--muted-foreground));
-    --mat-slide-toggle-disabled-unselected-handle-color: hsl(var(--muted-foreground));
-    --mat-slide-toggle-disabled-label-text-color: hsl(var(--muted-foreground));
-
-    --mat-slide-toggle-label-text-color: hsl(var(--foreground));
-    --mat-slide-toggle-label-text-font: var(--font-sans);
-    --mat-slide-toggle-label-text-line-height: 1.25rem;
-    --mat-slide-toggle-label-text-size: 0.875rem;
-    --mat-slide-toggle-label-text-tracking: 0;
-    --mat-slide-toggle-label-text-weight: 500;
-  }
-
-  [data-style='sharp'] {
-    --ui-mat-slide-toggle-track-radius: 0;
-    --ui-mat-slide-toggle-handle-radius: 0;
-
-    --mat-slide-toggle-track-shape: 0;
-    --mat-slide-toggle-handle-shape: 0;
-    --mat-slide-toggle-handle-elevation-shadow: none;
-  }
-
-  [data-style='brutal'] {
-    --ui-mat-slide-toggle-track-border-color: hsl(var(--foreground));
-    --ui-mat-slide-toggle-track-border-width: var(--border-width);
-    --ui-mat-slide-toggle-track-radius: 0;
-    --ui-mat-slide-toggle-handle-radius: 0;
-    --ui-mat-slide-toggle-focus-outline-color: hsl(var(--foreground));
-
-    --mat-slide-toggle-selected-track-color: hsl(var(--foreground));
-    --mat-slide-toggle-selected-hover-track-color: hsl(var(--foreground));
-    --mat-slide-toggle-selected-focus-track-color: hsl(var(--foreground));
-    --mat-slide-toggle-selected-pressed-track-color: hsl(var(--foreground));
-    --mat-slide-toggle-track-shape: 0;
-    --mat-slide-toggle-handle-shape: 0;
-    --mat-slide-toggle-selected-handle-color: hsl(var(--background));
-    --mat-slide-toggle-selected-hover-handle-color: hsl(var(--primary));
-    --mat-slide-toggle-selected-focus-handle-color: hsl(var(--primary));
-    --mat-slide-toggle-selected-pressed-handle-color: hsl(var(--primary));
-    --mat-slide-toggle-unselected-track-color: hsl(var(--background));
-    --mat-slide-toggle-unselected-hover-track-color: hsl(var(--background));
-    --mat-slide-toggle-unselected-focus-track-color: hsl(var(--background));
-    --mat-slide-toggle-unselected-pressed-track-color: hsl(var(--background));
-    --mat-slide-toggle-unselected-handle-color: hsl(var(--foreground));
-    --mat-slide-toggle-unselected-hover-handle-color: hsl(var(--foreground));
-    --mat-slide-toggle-unselected-focus-handle-color: hsl(var(--foreground));
-    --mat-slide-toggle-unselected-pressed-handle-color: hsl(var(--foreground));
-    --mat-slide-toggle-handle-elevation-shadow: var(--shadow-sm);
-    --mat-slide-toggle-selected-hover-state-layer-color: hsl(var(--foreground));
-    --mat-slide-toggle-unselected-hover-state-layer-color: hsl(var(--foreground));
-  }
-
-  [data-style='soft'] {
-    --ui-mat-slide-toggle-track-border-color: hsl(var(--border) / 0.7);
-
-    --mat-slide-toggle-track-width: 2.5rem;
-    --mat-slide-toggle-track-height: 1.375rem;
-    --mat-slide-toggle-handle-width: 1.125rem;
-    --mat-slide-toggle-handle-height: 1.125rem;
-    --mat-slide-toggle-selected-handle-size: 1.125rem;
-    --mat-slide-toggle-unselected-handle-size: 1.125rem;
-    --mat-slide-toggle-with-icon-handle-size: 1.125rem;
-    --mat-slide-toggle-pressed-handle-size: 1.25rem;
-    --mat-slide-toggle-unselected-track-color: hsl(var(--accent) / 0.72);
-    --mat-slide-toggle-unselected-hover-track-color: hsl(var(--accent) / 0.82);
-    --mat-slide-toggle-handle-elevation-shadow: 0 2px 6px hsl(var(--foreground) / 0.14);
-  }
-}
-
-@layer components {
-  .mat-mdc-slide-toggle {
-    @apply inline-flex align-middle text-foreground;
-  }
-
-  .mat-mdc-slide-toggle .mat-internal-form-field {
-    @apply inline-flex items-center gap-2;
-  }
-
-  .mat-mdc-slide-toggle .mdc-switch {
-    @apply shrink-0 transition-transform;
-  }
-
-  .mat-mdc-slide-toggle .mdc-switch:enabled:hover,
-  .mat-mdc-slide-toggle.mat-mdc-slide-toggle-focused .mdc-switch:enabled {
-    transform: translateY(-1px);
-  }
-
-  .mat-mdc-slide-toggle .mdc-switch:focus-visible {
-    outline: 2px solid var(--ui-mat-slide-toggle-focus-outline-color);
-    outline-offset: 3px;
-  }
-
-  .mat-mdc-slide-toggle .mdc-switch__track {
-    @apply transition-colors;
-  }
-
-  .mat-mdc-slide-toggle .mdc-switch__handle::before,
-  .mat-mdc-slide-toggle .mdc-switch__handle::after,
-  .mat-mdc-slide-toggle .mdc-switch__shadow {
-    border-radius: inherit;
-  }
-
-  .mat-mdc-slide-toggle .mdc-switch__ripple,
-  .mat-mdc-slide-toggle .mat-mdc-slide-toggle-ripple,
-  .mat-mdc-slide-toggle .mdc-switch__ripple::after,
-  .mat-mdc-slide-toggle .mat-focus-indicator::before {
-    border-radius: var(--ui-mat-slide-toggle-handle-radius);
-  }
-
-  .mat-mdc-slide-toggle .mdc-label {
-    @apply cursor-pointer p-0 text-sm font-medium;
-  }
-
-  .mat-mdc-slide-toggle.mat-mdc-slide-toggle-disabled-interactive,
-  .mat-mdc-slide-toggle:has(.mdc-switch--disabled) {
-    @apply opacity-70;
-  }
-
-  .mat-mdc-slide-toggle[aria-invalid='true'] {
-    --ui-mat-slide-toggle-track-border-color: hsl(var(--destructive) / 0.7);
-    --ui-mat-slide-toggle-focus-outline-color: hsl(var(--destructive));
-    --mat-slide-toggle-selected-track-color: hsl(var(--destructive));
-    --mat-slide-toggle-selected-hover-track-color: hsl(var(--destructive));
-    --mat-slide-toggle-selected-focus-track-color: hsl(var(--destructive));
-    --mat-slide-toggle-selected-pressed-track-color: hsl(var(--destructive));
-    --mat-slide-toggle-selected-handle-color: hsl(var(--destructive-foreground));
-    --mat-slide-toggle-selected-hover-handle-color: hsl(var(--destructive-foreground));
-    --mat-slide-toggle-selected-focus-handle-color: hsl(var(--destructive-foreground));
-    --mat-slide-toggle-selected-pressed-handle-color: hsl(var(--destructive-foreground));
-    --mat-slide-toggle-unselected-track-color: hsl(var(--destructive) / 0.16);
-    --mat-slide-toggle-unselected-hover-track-color: hsl(var(--destructive) / 0.2);
-    --mat-slide-toggle-unselected-focus-track-color: hsl(var(--destructive) / 0.2);
-    --mat-slide-toggle-unselected-pressed-track-color: hsl(var(--destructive) / 0.24);
-    --mat-slide-toggle-unselected-handle-color: hsl(var(--destructive));
-    --mat-slide-toggle-unselected-hover-handle-color: hsl(var(--destructive));
-    --mat-slide-toggle-unselected-focus-handle-color: hsl(var(--destructive));
-    --mat-slide-toggle-unselected-pressed-handle-color: hsl(var(--destructive));
-    --mat-slide-toggle-label-text-color: hsl(var(--destructive));
-  }
-
-  [data-style='sharp'] .mat-mdc-slide-toggle .mdc-switch:enabled:hover,
-  [data-style='sharp'] .mat-mdc-slide-toggle.mat-mdc-slide-toggle-focused .mdc-switch:enabled {
-    transform: none;
-  }
-}

package/theme/styles/integrations/material/slider.css

@@ -1,194 +0,0 @@
-/**
- * Angular Material slider overrides.
- *
- * MatSlider keeps Material's range math, keyboard handling, thumb labels, and
- * hidden native inputs while the visible track and thumbs follow local tokens.
- */
-@layer tokens {
-  :root,
-  [data-style='default'] {
-    --ui-mat-slider-track-radius: 9999px;
-    --ui-mat-slider-track-border-color: transparent;
-    --ui-mat-slider-inactive-track-opacity: 1;
-    --ui-mat-slider-handle-state-scale: 1.08;
-    --ui-mat-slider-disabled-opacity: 0.55;
-    --ui-mat-slider-value-indicator-shadow: var(--shadow-md);
-    --ui-mat-slider-value-indicator-border-color: hsl(var(--border));
-
-    --mat-slider-active-track-height: 0.5rem;
-    --mat-slider-active-track-shape: var(--ui-mat-slider-track-radius);
-    --mat-slider-active-track-color: hsl(var(--primary));
-    --mat-slider-inactive-track-height: 0.5rem;
-    --mat-slider-inactive-track-shape: var(--ui-mat-slider-track-radius);
-    --mat-slider-inactive-track-color: hsl(var(--muted));
-    --mat-slider-handle-width: 1rem;
-    --mat-slider-handle-height: 1rem;
-    --mat-slider-handle-shape: 9999px;
-    --mat-slider-handle-color: hsl(var(--primary));
-    --mat-slider-hover-handle-color: hsl(var(--primary));
-    --mat-slider-focus-handle-color: hsl(var(--primary));
-    --mat-slider-handle-elevation: 0 0 0 2px hsl(var(--background)), var(--shadow-sm);
-    --mat-slider-ripple-color: hsl(var(--primary));
-    --mat-slider-hover-state-layer-color: hsl(var(--primary) / 0.12);
-    --mat-slider-focus-state-layer-color: hsl(var(--ring) / 0.2);
-    --mat-slider-disabled-active-track-color: hsl(var(--muted-foreground));
-    --mat-slider-disabled-inactive-track-color: hsl(var(--muted));
-    --mat-slider-disabled-handle-color: hsl(var(--muted-foreground));
-    --mat-slider-with-overlap-handle-outline-color: hsl(var(--background));
-    --mat-slider-with-overlap-handle-outline-width: 2px;
-    --mat-slider-with-tick-marks-container-size: 2px;
-    --mat-slider-with-tick-marks-container-shape: 9999px;
-    --mat-slider-with-tick-marks-active-container-color: hsl(var(--primary-foreground));
-    --mat-slider-with-tick-marks-inactive-container-color: hsl(var(--muted-foreground));
-    --mat-slider-with-tick-marks-disabled-container-color: hsl(var(--muted-foreground));
-    --mat-slider-with-tick-marks-active-container-opacity: 0.75;
-    --mat-slider-with-tick-marks-inactive-container-opacity: 0.7;
-    --mat-slider-label-container-color: hsl(var(--popover));
-    --mat-slider-label-label-text-color: hsl(var(--popover-foreground));
-    --mat-slider-label-label-text-font: var(--font-sans);
-    --mat-slider-label-label-text-line-height: 1.25rem;
-    --mat-slider-label-label-text-size: 0.75rem;
-    --mat-slider-label-label-text-tracking: 0;
-    --mat-slider-label-label-text-weight: 600;
-    --mat-slider-value-indicator-border-radius: var(--radius-sm);
-    --mat-slider-value-indicator-caret-display: block;
-    --mat-slider-value-indicator-container-transform: translateX(-50%);
-    --mat-slider-value-indicator-height: 1.75rem;
-    --mat-slider-value-indicator-padding: 0 0.625rem;
-    --mat-slider-value-indicator-text-transform: none;
-    --mat-slider-value-indicator-transform-origin: bottom;
-    --mat-slider-value-indicator-width: auto;
-    --mat-slider-value-indicator-opacity: 1;
-  }
-
-  [data-style='sharp'] {
-    --ui-mat-slider-track-radius: 0;
-    --ui-mat-slider-handle-state-scale: 1;
-    --ui-mat-slider-value-indicator-shadow: none;
-
-    --mat-slider-active-track-shape: 0;
-    --mat-slider-inactive-track-shape: 0;
-    --mat-slider-handle-shape: 0;
-    --mat-slider-handle-elevation: none;
-    --mat-slider-with-tick-marks-container-shape: 0;
-    --mat-slider-value-indicator-border-radius: 0;
-  }
-
-  [data-style='brutal'] {
-    --ui-mat-slider-track-radius: 0;
-    --ui-mat-slider-track-border-color: hsl(var(--foreground));
-    --ui-mat-slider-handle-state-scale: 1.04;
-    --ui-mat-slider-value-indicator-shadow: var(--shadow-lg);
-    --ui-mat-slider-value-indicator-border-color: hsl(var(--foreground));
-
-    --mat-slider-active-track-color: hsl(var(--foreground));
-    --mat-slider-active-track-shape: 0;
-    --mat-slider-inactive-track-color: hsl(var(--background));
-    --mat-slider-inactive-track-shape: 0;
-    --mat-slider-handle-shape: 0;
-    --mat-slider-handle-color: hsl(var(--background));
-    --mat-slider-hover-handle-color: hsl(var(--primary));
-    --mat-slider-focus-handle-color: hsl(var(--primary));
-    --mat-slider-handle-elevation: 0 0 0 var(--border-width) hsl(var(--foreground)), var(--shadow-lg);
-    --mat-slider-ripple-color: hsl(var(--foreground));
-    --mat-slider-hover-state-layer-color: hsl(var(--primary) / 0.2);
-    --mat-slider-focus-state-layer-color: hsl(var(--foreground) / 0.18);
-    --mat-slider-with-overlap-handle-outline-color: hsl(var(--foreground));
-    --mat-slider-with-tick-marks-container-shape: 0;
-    --mat-slider-with-tick-marks-active-container-color: hsl(var(--primary-foreground));
-    --mat-slider-with-tick-marks-inactive-container-color: hsl(var(--foreground));
-    --mat-slider-label-container-color: hsl(var(--foreground));
-    --mat-slider-label-label-text-color: hsl(var(--background));
-    --mat-slider-value-indicator-border-radius: 0;
-  }
-
-  [data-style='soft'] {
-    --ui-mat-slider-inactive-track-opacity: 1;
-    --ui-mat-slider-handle-state-scale: 1.1;
-    --ui-mat-slider-value-indicator-border-color: hsl(var(--border) / 0.7);
-
-    --mat-slider-active-track-height: 0.625rem;
-    --mat-slider-inactive-track-height: 0.625rem;
-    --mat-slider-inactive-track-color: hsl(var(--accent) / 0.68);
-    --mat-slider-handle-width: 1.125rem;
-    --mat-slider-handle-height: 1.125rem;
-    --mat-slider-handle-elevation: 0 0 0 3px hsl(var(--background)), var(--shadow-md);
-    --mat-slider-hover-state-layer-color: hsl(var(--primary) / 0.16);
-    --mat-slider-focus-state-layer-color: hsl(var(--ring) / 0.24);
-    --mat-slider-label-container-color: hsl(var(--popover));
-    --mat-slider-value-indicator-border-radius: var(--radius-md);
-  }
-}
-
-@layer components {
-  .mat-mdc-slider {
-    @apply block w-full min-w-32 text-foreground;
-
-    display: block !important;
-    width: 100% !important;
-    min-width: 8rem !important;
-    min-height: 3rem;
-    margin-inline: 0;
-  }
-
-  .mat-mdc-slider .mdc-slider__track--active,
-  .mat-mdc-slider .mdc-slider__track--inactive {
-    @apply transition-colors;
-
-    border-radius: var(--ui-mat-slider-track-radius);
-  }
-
-  .mat-mdc-slider .mdc-slider__track--inactive {
-    opacity: var(--ui-mat-slider-inactive-track-opacity);
-  }
-
-  .mat-mdc-slider .mdc-slider__track--inactive::before {
-    border-color: var(--ui-mat-slider-track-border-color);
-  }
-
-  .mat-mdc-slider .mdc-slider__thumb-knob {
-    transition:
-      transform 160ms ease,
-      background-color 160ms ease,
-      border-color 160ms ease,
-      box-shadow 160ms ease;
-  }
-
-  .mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb-knob,
-  .mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb-knob {
-    transform: translate(-50%, -50%) scale(var(--ui-mat-slider-handle-state-scale));
-  }
-
-  .mat-mdc-slider .mat-focus-indicator::before {
-    border-radius: var(--mat-slider-handle-shape);
-  }
-
-  .mat-mdc-slider .mdc-slider__value-indicator {
-    @apply border shadow-md;
-
-    border-color: var(--ui-mat-slider-value-indicator-border-color);
-    box-shadow: var(--ui-mat-slider-value-indicator-shadow);
-  }
-
-  .mat-mdc-slider .mdc-slider__value-indicator-text {
-    @apply font-semibold;
-  }
-
-  .mat-mdc-slider .mdc-slider__value-indicator::after {
-    border-color: var(--ui-mat-slider-value-indicator-border-color);
-  }
-
-  .mat-mdc-slider.mdc-slider--disabled {
-    @apply pointer-events-none;
-
-    opacity: var(--ui-mat-slider-disabled-opacity);
-  }
-
-  .mat-mdc-slider.mdc-slider--disabled input.mdc-slider__input {
-    @apply cursor-not-allowed;
-  }
-
-  [data-style='brutal'] .mat-mdc-slider .mdc-slider__value-indicator {
-    @apply border-2;
-  }
-}