@use '../utils/size_variables';

/**
 * Copyright IBM Corp. 2016, 2025
 * SPDX-License-Identifier: BUSL-1.1
 */

.counts-card-container {
  padding: size_variables.$spacing-12 size_variables.$spacing-24;
  margin-bottom: size_variables.$spacing-24;

  // LEGEND POSITION (color and styling is in chart.scss)
  .legend-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;

    .legend-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
  }

  .chart-flex-row {
    display: flex;
    gap: 1rem;

    .item-left {
      flex: 1 1 40%;
      min-width: 0;
    }
    .item-right {
      flex: 2 1 60%;
      min-width: 0;
    }

    // Stack vertically on smaller screens
    @media (max-width: 1024px) {
      flex-direction: column;

      .item-left,
      .item-right {
        flex: 1 1 100%;
        width: 100%;
      }
    }
  }
}
