@use 'sass:math';
@use '../../compiled/tokens/scss/opacity';
@use '../../compiled/tokens/scss/size';
@use '../../mixins/svg';
@use '../../mixins/icon';

.c-icon {
  @include svg.inherit-color;
  @include svg.inherit-size;
  display: inline-block;
  font-size: var(--icon-size, inherit);
  position: relative;
  vertical-align: middle;
}

/**
 * Apply a small vertical adjustment to properly align with adjacent text.
 */

.c-icon--inline {
  @include icon.inline;
}

/**
 * Muted modifier
 */

.c-icon--muted {
  opacity: opacity.$muted;
}

/**
 * Size modifiers
 */

.c-icon--medium {
  --icon-size: #{size.$icon-medium};
}

.c-icon--large {
  --icon-size: #{size.$icon-large};
}

.c-icon--x-large {
  --icon-size: #{size.$icon-x-large};
}