@use '@angular/material' as mat;

// ERU Studio component styles that consume Material Design tokens
// No custom theme definition - let the usage project provide the theme

// Studio styling using Material Design tokens
@mixin eru-studio-theme($theme) {
  // Apply Material Design component overrides within the theme context
  @include mat.slide-toggle-overrides((
    track-height: 20px,
    track-width: 42px,
    selected-icon-size: 12px,
    pressed-handle-size: 12px,
    unselected-icon-size: 12px,
    with-icon-handle-size: 15px,
    state-layer-size: 10px,
  ));

  @include mat.menu-overrides((
    item-label-text-size: 12px,
    item-spacing: 10px
  ));

  @include mat.form-field-overrides((
    outlined-label-text-size: 12px,
    container-text-size: 12px
  ));

  @include mat.option-overrides((
    label-text-line-height: 10px,
    label-text-size: 12px
  ));

  @include mat.button-overrides((
    filled-container-height: 35px,
    filled-container-shape: 5px,
    outlined-container-shape: 5px,
    outlined-container-height: 35px,
  ));

  @include mat.table-overrides((
    row-item-container-height: 50px,
    background-color: mat.get-theme-color($theme, surface)
  ));

  @include mat.sidenav-overrides((
    container-background-color: mat.get-theme-color($theme, surface),
    container-text-color: mat.get-theme-color($theme, on-surface),
    content-background-color: mat.get-theme-color($theme, surface),
    content-text-color: mat.get-theme-color($theme, on-surface),
  ));

  @include mat.select-overrides((
    trigger-text-size: 12px,
    panel-background-color: mat.get-theme-color($theme, surface)
  ));

  // Apply theme properties with higher specificity to override fallback values
  .eru-studio {
    // Use Material's color tokens
    --studio-primary: #{mat.get-theme-color($theme, primary, 40)} !important;
    --studio-on-primary: #{mat.get-theme-color($theme, primary, 100)} !important;
    --studio-primary-container: #{mat.get-theme-color($theme, primary-container)} !important;
    --studio-on-primary-container: #{mat.get-theme-color($theme, on-primary-container)} !important;
    --studio-secondary: #{mat.get-theme-color($theme, secondary)} !important;
    --studio-on-secondary: #{mat.get-theme-color($theme, on-secondary)} !important;
    --studio-secondary-container: #{mat.get-theme-color($theme, secondary-container)} !important;
    --studio-on-secondary-container: #{mat.get-theme-color($theme, on-secondary-container)} !important;
    --studio-tertiary: #{mat.get-theme-color($theme, tertiary)} !important;
    --studio-on-tertiary: #{mat.get-theme-color($theme, on-tertiary)} !important;
    --studio-tertiary-container: #{mat.get-theme-color($theme, tertiary-container)} !important;
    --studio-on-tertiary-container: #{mat.get-theme-color($theme, on-tertiary-container)} !important;
    --studio-surface: #{mat.get-theme-color($theme, surface)} !important;
    --studio-surface-variant: #{mat.get-theme-color($theme, surface-variant)} !important;
    --studio-surface-container: #{mat.get-theme-color($theme, surface-container)} !important;
    --studio-surface-container-high: #{mat.get-theme-color($theme, surface-container-high)} !important;
    --studio-on-surface: #{mat.get-theme-color($theme, on-surface)} !important;
    --studio-on-surface-variant: #{mat.get-theme-color($theme, on-surface-variant)} !important;
    --studio-outline: #{mat.get-theme-color($theme, outline)} !important;
    --studio-outline-variant: #{mat.get-theme-color($theme, outline-variant)} !important;
    --studio-error: #{mat.get-theme-color($theme, error)} !important;
    --studio-error-container: #{mat.get-theme-color($theme, error-container)} !important;

    // "Base" tokens — flip pure white/black (and a neutral border) by light/dark.
    // Use these when a component must read as plain paper in light mode and a
    // dark canvas in dark mode, regardless of the M3 surface tone.
    --studio-base-surface: light-dark(#ffffff, #1a1a1a) !important;
    --studio-base-on-surface: light-dark(#000000, #ffffff) !important;
    --studio-base-border: light-dark(#e5e7eb, #3a3a3a) !important;

    // Use Material's typography tokens - OVERRIDE fallback values
    --studio-font-family: #{mat.get-theme-typography($theme, body-large, font-family)} !important;
    --studio-font-size-body: #{mat.get-theme-typography($theme, body-small, font-size)} !important;
    --studio-font-size-caption: #{mat.get-theme-typography($theme, body-small, font-size)} !important;
    --studio-line-height-body: #{mat.get-theme-typography($theme, body-medium, line-height)} !important;

    // Use Material's spacing (derive from density)
    --studio-outline-width: 1px !important;
    --studio-spacing-xxs: 2px !important;
    --studio-spacing-xs: 4px !important;
    --studio-spacing-sm: 8px !important;
    --studio-spacing-md: 16px !important;
    --studio-spacing-lg: 24px !important;

    // Use Material's shape tokens (fallback to standard value)
    --studio-border-radius: 4px !important;

    // Use Material's elevation tokens (fallback to standard values)
    --studio-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important;
    --studio-elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15) !important;
  }
}

// Default fallback when no theme is provided
.eru-studio {
  // Fallback values using Material's default light theme tokens
  --studio-primary: #6750a4;
  --studio-on-primary: #ffffff;
  --studio-primary-container: #eaddff;
  --studio-on-primary-container: #21005d;
  --studio-secondary: #625b71;
  --studio-on-secondary: #ffffff;
  --studio-secondary-container: #e8def8;
  --studio-on-secondary-container: #1d192b;
  --studio-tertiary: #7d5260;
  --studio-on-tertiary: #ffffff;
  --studio-tertiary-container: #ffd8e4;
  --studio-on-tertiary-container: #31111d;
  --studio-surface: #fef7ff;
  --studio-surface-variant: #e7e0ec;
  --studio-surface-container: #f3edf7;
  --studio-surface-container-high: #ede7f0;
  --studio-on-surface: #1d1b20;
  --studio-on-surface-variant: #49454f;
  --studio-outline: #79757f;
  --studio-outline-variant: #cac4d0;
  --studio-error: #ba1a1a;
  --studio-error-container: #ffdad6;

  // Base tokens — fixed white/black flip (light-mode fallbacks here; host can
  // override per-mode via light-dark() or a .dark class).
  --studio-base-surface: #ffffff;
  --studio-base-on-surface: #000000;
  --studio-base-border: #e5e7eb;

  --studio-outline-width: 1px !important;
  --studio-font-family: 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --studio-font-size-body: 12px;
  --studio-font-size-caption: 12px;
  --studio-line-height-body: 1;

  --studio-spacing-xxs: 2px;
  --studio-spacing-xs: 4px;
  --studio-spacing-sm: 8px;
  --studio-spacing-md: 16px;
  --studio-spacing-lg: 24px;

  --studio-border-radius: 4px;

  --studio-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --studio-elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
}

.mdc-notched-outline__notch {
  border-style: none;
}

.mat-mdc-icon-button {
  line-height: normal;
}

// Properties panel form field styling
.property-grid {
  .property-item mat-form-field {
    width: 100%;
    min-width: 0;
    
    .mat-mdc-form-field-infix {
      min-width: 0;
    }
    
    .mat-mdc-text-field-wrapper {
      min-width: 0;
    }
  }
}