@use 'sass:color';

// ==========================================================================
// Monitor.Cat — Icon Pedestals
// ==========================================================================

@use 'tokens' as *;

.monitorcat-wrap {
  // ---------------------------------------------------------------------------
  // Base pedestal
  // ---------------------------------------------------------------------------
  .mc-pedestal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: $mc-radius-inset;
    background: $mc-white;
    box-shadow:
      $mc-shadow-pedestal,
      $mc-shadow-pedestal-inset;
    flex-shrink: 0;
    transition:
      transform $mc-transition-base,
      box-shadow $mc-transition-base;
  }

  // ---------------------------------------------------------------------------
  // Size variants
  // ---------------------------------------------------------------------------
  .mc-pedestal-lg {
    width: 80px;
    height: 80px;
    border-radius: 24px;
  }

  .mc-pedestal-xl {
    width: 96px;
    height: 96px;
    border-radius: 28px;
  }

  .mc-pedestal-sm {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  // ---------------------------------------------------------------------------
  // Color tint variants
  // ---------------------------------------------------------------------------
  .mc-pedestal-primary {
    background: $mc-primary-light;
    border: 1px solid rgba($mc-primary, 0.12);
  }

  .mc-pedestal-cyan {
    background: $mc-cyan-light;
    border: 1px solid rgba($mc-cyan, 0.12);
  }

  .mc-pedestal-mint {
    background: $mc-mint-light;
    border: 1px solid rgba($mc-mint, 0.12);
  }

  .mc-pedestal-lavender {
    background: $mc-lavender-light;
    border: 1px solid rgba($mc-lavender, 0.12);
  }

  .mc-pedestal-coral {
    background: $mc-coral-light;
    border: 1px solid rgba($mc-coral, 0.12);
  }

  .mc-pedestal-pink {
    background: $mc-pink-light;
    border: 1px solid rgba($mc-pink, 0.12);
  }

  // ---------------------------------------------------------------------------
  // Font Awesome icon color utilities
  // ---------------------------------------------------------------------------
  .mc-fa-primary {
    color: $mc-primary;
    --fa-primary-color: #{$mc-primary};
    --fa-secondary-color: #{$mc-primary-hover};
  }

  .mc-fa-lavender {
    color: $mc-lavender-strong;
    --fa-primary-color: #{$mc-lavender-strong};
    --fa-secondary-color: #{$mc-lavender};
  }

  .mc-fa-mint {
    color: $mc-mint-strong;
    --fa-primary-color: #{$mc-mint-strong};
    --fa-secondary-color: #{$mc-mint};
  }

  .mc-fa-coral {
    color: $mc-coral-strong;
    --fa-primary-color: #{$mc-coral-strong};
    --fa-secondary-color: #{$mc-coral};
  }

  .mc-fa-cyan {
    color: $mc-cyan-strong;
    --fa-primary-color: #{$mc-cyan-strong};
    --fa-secondary-color: #{$mc-cyan};
  }

  .mc-fa-pink {
    color: $mc-pink;
    --fa-primary-color: #{$mc-pink};
    --fa-secondary-color: #{color.adjust($mc-pink, $lightness: 10%)};
  }

  .mc-fa-text {
    color: $mc-text;
    --fa-primary-color: #{$mc-text};
    --fa-secondary-color: #{$mc-text-medium};
  }
}