/**
 * @file _layers.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 17.04.2025
 * @modified 23.05.2025
 * @@VERSION@@
 * @brief Styles für die Layers und das Kontextuelle Verhalten der Komponenten.
 */

[class*="kern-"]:not([class*="kern-level-"]),
.kern-level-0 {
  --kern-color-layout-text-default-contextual: var(--kern-color-layout-text-default);
  --kern-color-layout-text-muted-contextual: var(--kern-color-layout-text-muted);
  --kern-color-layout-text-inverse-contextual: var(--kern-color-layout-text-inverse);
  --kern-color-layout-layer-surface-contextual: var(--kern-color-layout-background-default-surface);
  --kern-color-layout-background-default-contextual: var(--kern-color-layout-background-default);
  --kern-color-layout-border-contextual: var(--kern-color-layout-border);
  --kern-color-action-default-contextual: var(--kern-color-action-default);
  --kern-color-action-on-default-contextual: var(--kern-color-action-on-default);
  --kern-color-color-action-state-indicator-default-contextual: var(--kern-color-action-state-indicator-default);
  --kern-color-action-state-indicator-tint-contextual: var(--kern-color-action-state-indicator-tint);
  --kern-color-action-visited-contextual: var(--kern-color-action-visited);
  --kern-color-action-focus-default-contextual: var(--kern-color-action-focus-default);
  --kern-color-decorative-brand-contextual: var(--kern-color-decorative-brand-default);
  --kern-color-form-input-border-contextual: var(--kern-color-form-input-border);
  --kern-color-decorative-border-contextual: var(--kern-color-decorative-border-default);
  --kern-color-feedback-info-contextual: var(--kern-color-feedback-info);
  --kern-color-feedback-info-background-contextual: var(--kern-color-feedback-info-background);
  --kern-color-feedback-success-contextual: var(--kern-color-feedback-success);
  --kern-color-feedback-success-background-contextual: var(--kern-color-feedback-success-background);
  --kern-color-feedback-warning-contextual: var(--kern-color-feedback-warning);
  --kern-color-feedback-warning-background-contextual: var(--kern-color-feedback-warning-background);
  --kern-color-feedback-danger-contextual: var(--kern-color-feedback-danger);
  --kern-color-feedback-danger-background-contextual: var(--kern-color-feedback-danger-background);
  --kern-color-feedback-default-contextual: var(--kern-color-feedback-default);
  --kern-color-feedback-default-background-contextual: var(--kern-color-feedback-default-background);
}

.kern-level-1 {
  --kern-color-layout-text-default-contextual: var(--kern-color-layout-text-default);
  --kern-color-layout-text-muted-contextual: var(--kern-color-layout-text-muted);
  --kern-color-layout-text-inverse-contextual: var(--kern-color-layout-text-inverse);
  --kern-color-layout-layer-surface-contextual: var(--kern-color-layout-background-level-1-surface);
  --kern-color-layout-background-default-contextual: var(--kern-color-layout-background-level-1);
  --kern-color-layout-border-contextual: var(--kern-color-layout-border-level-1);
  --kern-color-action-default-contextual: var(--kern-color-action-default);
  --kern-color-action-on-default-contextual: var(--kern-color-action-on-default);
  --kern-color-action-state-indicator-default-contextual: var(--kern-color-action-state-indicator-default);
  --kern-color-action-state-indicator-tint-contextual: var(--kern-color-action-state-indicator-tint);
  --kern-color-action-visited-contextual: var(--kern-color-action-visited);
  --kern-color-action-focus-default-contextual: var(--kern-color-action-focus-default);
  --kern-color-decorative-brand-contextual: var(--kern-color-decorative-brand-default);
  --kern-color-form-input-border-contextual: var(--kern-color-form-input-border);
  --kern-color-decorative-border-contextual: var(--kern-color-decorative-border-level-1);
  --kern-color-feedback-info-contextual: var(--kern-color-feedback-info);
  --kern-color-feedback-info-background-contextual: var(--kern-color-feedback-info-background);
  --kern-color-feedback-success-contextual: var(--kern-color-feedback-success);
  --kern-color-feedback-success-background-contextual: var(--kern-color-feedback-success-background);
  --kern-color-feedback-warning-contextual: var(--kern-color-feedback-warning);
  --kern-color-feedback-warning-background-contextual: var(--kern-color-feedback-warning-background);
  --kern-color-feedback-danger-contextual: var(--kern-color-feedback-danger);
  --kern-color-feedback-danger-background-contextual: var(--kern-color-feedback-danger-background);
  --kern-color-feedback-default-contextual: var(--kern-color-feedback-default);
  --kern-color-feedback-default-background-contextual: var(--kern-color-feedback-default-background);
}

.kern-level-2 {
  --kern-color-layout-text-default-contextual: var(--kern-color-layout-text-default);
  --kern-color-layout-text-muted-contextual: var(--kern-color-layout-text-muted);
  --kern-color-layout-text-inverse-contextual: var(--kern-color-layout-text-inverse);
  --kern-color-layout-layer-surface-contextual: var(--kern-color-layout-background-level-2-surface);
  --kern-color-layout-background-default-contextual: var(--kern-color-layout-background-level-2);
  --kern-color-layout-border-contextual: var(--kern-color-layout-border-level-2);
  --kern-color-action-default-contextual: var(--kern-color-action-default);
  --kern-color-action-on-default-contextual: var(--kern-color-action-on-default);
  --kern-color-action-state-indicator-default-contextual: var(--kern-color-action-state-indicator-default);
  --kern-color-action-state-indicator-tint-contextual: var(--kern-color-action-state-indicator-tint);
  --kern-color-action-visited-contextual: var(--kern-color-action-visited);
  --kern-color-action-focus-default-contextual: var(--kern-color-action-focus-default);
  --kern-color-decorative-brand-contextual: var(--kern-color-decorative-brand-default);
  --kern-color-form-input-border-contextual: var(--kern-color-form-input-border);
  --kern-color-decorative-border-contextual: var(--kern-color-decorative-border-level-2);
  --kern-color-feedback-info-contextual: var(--kern-color-feedback-info);
  --kern-color-feedback-info-background-contextual: var(--kern-color-feedback-info-background);
  --kern-color-feedback-success-contextual: var(--kern-color-feedback-success);
  --kern-color-feedback-success-background-contextual: var(--kern-color-feedback-success-background);
  --kern-color-feedback-warning-contextual: var(--kern-color-feedback-warning);
  --kern-color-feedback-warning-background-contextual: var(--kern-color-feedback-warning-background);
  --kern-color-feedback-danger-contextual: var(--kern-color-feedback-danger);
  --kern-color-feedback-danger-background-contextual: var(--kern-color-feedback-danger-background);
  --kern-color-feedback-default-contextual: var(--kern-color-feedback-default);
  --kern-color-feedback-default-background-contextual: var(--kern-color-feedback-default-background);
}

.kern-layer {
  background-color: var(--kern-color-layout-background-default-contextual);
}