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

/**
 * Dashboard Widgets - Widget-specific styles for dashboards
 *
 * Note: Uses $component-padding and $size-16 for spacing. Uses $text-muted for colors.
 *
 * Intentionally hardcoded values:
 * - Clamp font-size (14px, 75%, 54px): Responsive font constraints
 * - Transition duration (0.25s): Animation timing
 * - Bottom positioning (12px): Off-grid fine-tuning
 * - Aspect-ratio (281/148): Specific thumbnail ratio
 * - Min-height (240px): Chart container height
 */

.kpi-widget__container {
  padding: 0 $component-padding $component-padding;
  .panel-title-hidden & {
    padding-top: $component-padding;
  }
  small {
    color: $text-muted;
    font-size: clamp(14px, 75%, 54px);
  }
  .dot-info {
    transition: all 0.25s ease;
  }
}

.pie-chart-warning {
  position: absolute;
  bottom: 12px;
  margin-left: $size-16;
}

.widget-thumbnail {
  width: 100%;
  aspect-ratio: 281/148;
  object-fit: cover;
  object-position: top left;
}

.widget-preview {
  .chart-container {
    min-height: 240px;
  }
}