// ============================================================================
// :: Icon
// ============================================================================
/**
 * A simple way of displaying an icon in a certain size
 */

// ============================================================================
// :: Root
// ============================================================================
.a-icon {
  display: inline-block;

  font-size: $icon-size-base;
  line-height: $line-height-normalize.5;
}

// ============================================================================
// :: Modifiers
// ============================================================================

.a-icon--1x-small {
  font-size: $icon-size-1x-small;
}

.a-icon--1x-large {
  font-size: $icon-size-base;

  @include respond-at($breakpoint-tablet-default) {
    font-size: $icon-size-1x-large;
  }
}

.a-icon--2x-large {
  font-size: $icon-size-1x-large;

  @include respond-at($breakpoint-tablet-default) {
    font-size: $icon-size-2x-large;
  }
}

.a-icon--3x-large {
  font-size: $icon-size-2x-large;

  @include respond-at($breakpoint-tablet-default) {
    font-size: $icon-size-3x-large;
  }
}

.a-icon--4x-large {
  font-size: $icon-size-4x-large;
}

.a-icon--5x-large {
  font-size: $icon-size-5x-large;
}