@use "../../../variables/index" as *;


/**
 * c8y message uanner - Component styles
 *
 * Note: Uses $size-* tokens for spacing where applicable.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions: Fixed sizes for component layout
 * - Off-grid spacing: Component-specific positioning
 * - Border widths (1px, 2px, 3px): Standard borders
 * - Font-sizes: Typography
 * - Percentages: Layout
 */
.c8y-message-banner{
  position: fixed;
  z-index: 10000;
  width: 100%;
  pointer-events: none;
  .alert{
    margin: $size-16 auto;
    box-shadow: var(--c8y-elevation-lg);
    pointer-events: auto;
    .close{
      margin: calc(-1 * $size-4) calc(-1 * $size-4) 0 $size-8;
    }
    > span{
      white-space: normal;
    }
    &.alert-info{
      background-color: var(--palette-status-info-light, var(--c8y-palette-status-info-light));
      border: 2px solid var(--palette-status-info, var(--c8y-palette-status-info));
    }
    &.alert-warning{
      background-color: var(--palette-status-warning-light, var(--c8y-palette-status-warning-light));
      border: 2px solid var(--palette-status-warning, var(--c8y-palette-status-warning));
    }
    &.alert-danger{
      background-color: var(--palette-status-danger-light, var(--c8y-palette-status-danger-light));
      border: 2px solid var(--palette-status-danger, var(--c8y-palette-status-danger));
    }
    &.alert-success{
      background-color: var(--palette-status-success-light, var(--c8y-palette-status-success-light));
      border: 2px solid var(--palette-status-success, var(--c8y-palette-status-success));
    }
    &.alert-system{
      background-color: var(--brand-80, var(--c8y-brand-80));
      border: 2px solid var(--brand-primary, var(--c8y-brand-primary));
    }
  }
}
