@import 'variables';

.aa-icon {
  display: inline-block;
  font: normal normal normal 14px/1 AmericanIcons;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &.aa-xs {
    font-size: 0.8em;
  }

  &.aa-sm {
    font-size: 1em;
  }

  &.aa-md {
    font-size: 1.5em;
  }

  &.aa-lg {
    font-size: 2em;
  }

  &.aa-xl {
    font-size: 3em;
  }

  &.aa-xxl {
    font-size: 5em;
  }

  &.aa-xxxl {
    font-size: 8em;
  }

  &.aa-icon-round {
    border: 2px solid;
    border-radius: 50%;
    padding: 0.25em;
  }
}

@each $name,
$content in $icons {
  .aa-icon.aa-#{$name}::before {
    content: $content;
  }
}