/*
 * ng-glass — base styles
 *
 * Every visual property is a CSS custom property. Angular inputs write
 * the --ng-glass-* vars at runtime; you can override any of them in your
 * own stylesheet at any specificity level:
 *
 *   .my-panel {
 *     --ng-glass-backdrop:      blur(24px) saturate(200%);
 *     --ng-glass-background:    linear-gradient(...);
 *     --ng-glass-border-radius: 20px;
 *     --ng-glass-border-color:  rgba(100,149,237,0.4);
 *     --ng-glass-border-width:  2px;
 *     --ng-glass-border-style:  dashed;
 *     --ng-glass-shadow:        0 8px 32px rgba(0,0,0,0.3);
 *     --ng-glass-overflow:      visible;   (opt-out of overflow:hidden)
 *     --ng-glass-transition:    none;      (opt-out of transitions)
 *   }
 */

.ng-glass {
  /* Fallback values — Angular inputs overwrite these at runtime */
  --ng-glass-backdrop:      blur(10px) saturate(150%);
  --ng-glass-background:    linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  --ng-glass-border-radius: 10px;
  --ng-glass-border-color:  rgba(255, 255, 255, 0.2);
  --ng-glass-border-width:  1px;
  --ng-glass-border-style:  solid;
  --ng-glass-shadow:        0 4px 30px rgba(0, 0, 0, 0.1);
  --ng-glass-blend:         normal;
  --ng-glass-overflow:      hidden;
  --ng-glass-transition:    background 0.3s ease, backdrop-filter 0.3s ease,
                            border-color 0.3s ease, box-shadow 0.3s ease;

  backdrop-filter:         var(--ng-glass-backdrop);
  -webkit-backdrop-filter: var(--ng-glass-backdrop);
  background:              var(--ng-glass-background);
  border-radius:           var(--ng-glass-border-radius);
  border-width:            var(--ng-glass-border-width);
  border-style:            var(--ng-glass-border-style);
  border-color:            var(--ng-glass-border-color);
  box-shadow:              var(--ng-glass-shadow);
  background-blend-mode:   var(--ng-glass-blend);
  overflow:                var(--ng-glass-overflow);
  transition:              var(--ng-glass-transition);
}