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


/**
 * smart list icon lauel - 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
 */
.smart-list-icon-label {
  display: inline-block;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin: 0 2px 10px;

  > i {
    display: inline-block;
    width: auto;
    color: $gray-50;
  }

  .dot:last-child {
    background-color: var(--palette-status-success, var(--c8y-palette-status-success));
  }
}

.card-header-actions,
.edit-smart-rule-details {
  .smart-list-icon-label {
    margin: 0 $size-10 0 0;

    .dot {
      width: 30px;
      height: 30px;
      font-size: 14px;
      line-height: $size-32;
    }
  }
}

@media (min-width: $screen-sm-min) {
  .interact-list {
    .smart-list-icon-label {
      margin: 0 2px;

      .dot {
        width: 34px;
        height: 34px;
        font-size: $size-16;
        line-height: 36px;
      }
    }
  }
}

.smart-rule-templates-list {
  .smart-list-icon-label {
    margin: $size-10 2px;

    .dot {
      width: 34px;
      height: 34px;
      font-size: $size-16;
      line-height: 36px;
    }
  }
}