/* Icon Font Definitions */
@font-face {
  font-family: 'MaterialIcons-Regular';
  src: url('./MaterialIcons.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MaterialDesignIcons';
  src: url('./MaterialCommunityIcons.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FeatherIcons';
  src: url('./MaterialCommunityIcons.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Icon component CSS variables */
:root {
  /* Icon sizing scale */
  --icon--size--xs: var(--spacing-3); /* 12px */
  --icon--size--sm: var(--spacing-4); /* 16px */
  --icon--size--md: var(--spacing-6); /* 24px */
  --icon--size--lg: var(--spacing-8); /* 32px */
  --icon--size--xl: var(--spacing-12); /* 48px */
  
  /* Icon font properties */
  --icon--font-weight: var(--font-weight-normal);
  --icon--line-height: 1;
  --icon--letter-spacing: normal;
  
  /* Icon fallback colors */
  --icon--fallback--color: var(--color-text-tertiary);
  --icon--fallback--opacity: 0.6;
}

/* Icon class definitions */
.material {
  font-family: 'MaterialIcons-Regular';
  font-weight: var(--icon--font-weight);
  font-style: normal;
  font-size: var(--icon--size--md);
  line-height: var(--icon--line-height);
  letter-spacing: var(--icon--letter-spacing);
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

.material-community {
  font-family: 'MaterialDesignIcons';
  font-weight: var(--icon--font-weight);
  font-style: normal;
  font-size: var(--icon--size--md);
  line-height: var(--icon--line-height);
  letter-spacing: var(--icon--letter-spacing);
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

.feather {
  font-family: 'FeatherIcons';
  font-weight: var(--icon--font-weight);
  font-style: normal;
  font-size: var(--icon--size--md);
  line-height: var(--icon--line-height);
  letter-spacing: var(--icon--letter-spacing);
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

/* Icon component base styling */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: var(--icon--line-height);
  vertical-align: middle;
  
  /* Default size */
  width: var(--icon--size--md);
  height: var(--icon--size--md);
  font-size: var(--icon--size--md);
}

/* Size variants using semantic tokens */
.icon[data-size="xs"] { 
  width: var(--icon--size--xs);
  height: var(--icon--size--xs);
  font-size: var(--icon--size--xs);
}

.icon[data-size="sm"] { 
  width: var(--icon--size--sm);
  height: var(--icon--size--sm);
  font-size: var(--icon--size--sm);
}

.icon[data-size="md"] { 
  width: var(--icon--size--md);
  height: var(--icon--size--md);
  font-size: var(--icon--size--md);
}

.icon[data-size="lg"] { 
  width: var(--icon--size--lg);
  height: var(--icon--size--lg);
  font-size: var(--icon--size--lg);
}

.icon[data-size="xl"] { 
  width: var(--icon--size--xl);
  height: var(--icon--size--xl);
  font-size: var(--icon--size--xl);
}

/* Color inheritance */
.icon {
  color: inherit; /* Inherits from parent */
}

.icon svg {
  fill: currentColor; /* SVGs use current text color */
}

/* Fallback icon styling using semantic tokens */
.icon-fallback {
  opacity: var(--icon--fallback--opacity);
  color: var(--icon--fallback--color);
}

/* SVG icon specific styles */
.icon-svg {
  display: inline-block;
  vertical-align: middle;
  
  /* SVG-specific properties */
  fill: currentColor;
  stroke: currentColor;
}

/* String icon specific styles */
.icon-string {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* String content styling */
  text-align: center;
  user-select: none;
}