// Sizes
$xs: 0.75rem;
$sm: 0.825rem;
$md: 1rem;
$lg: 1.2rem;
$xl: 1.5rem;
$x2: 2rem;
$x3: 3rem;
$x4: 4rem;
$x5: 5rem;
$x6: 6rem;
$x7: 7rem;

// Colors
$gray: #555;
$light: #ffffff;
$primary: #00abf7;
$success: #56be43;
$info: #016597;
$warning: #fc751a;
$danger: #f04437;

.b-icon {
  width: $md;
  height: $md;
  color: $gray;
  fill: $gray;
  stroke: $gray;
  stroke-width: 4px;
  transition: all 0.3s ease-in-out;
}

.b-icon.xs {
  width: $xs;
  height: $xs;
  stroke-width: 4px;
}
.b-icon.sm {
  width: $sm;
  height: $sm;
  stroke-width: 3px;
}
.b-icon.md {
  width: $md;
  height: $md;
  stroke-width: 3px;
}
.b-icon.lg {
  width: $lg;
  height: $lg;
  stroke-width: 3px;
}
.b-icon.xl {
  width: $xl;
  height: $xl;
  stroke-width: 3px;
}
.b-icon.x2 {
  width: $x2;
  height: $x2;
  stroke-width: 3px;
}
.b-icon.x3 {
  width: $x3;
  height: $x3;
  stroke-width: 2px;
}
.b-icon.x4 {
  width: $x4;
  height: $x4;
  stroke-width: 2px;
}
.b-icon.x5 {
  width: $x5;
  height: $x5;
  stroke-width: 2px;
}
.b-icon.x6 {
  width: $x6;
  height: $x6;
  stroke-width: 2px;
}
.b-icon.x7 {
  width: $x7;
  height: $x7;
  stroke-width: 2px;
}

.b-icon.light {
  color: $light;
  fill: $light;
  stroke: $light;
}

.b-icon.primary {
  color: $primary;
  fill: $primary;
  stroke: $primary;
}

.b-icon.info {
  color: $info;
  fill: $info;
  stroke: $info;
}

.b-icon.success {
  color: $success;
  fill: $success;
  stroke: $success;
}

.b-icon.warning {
  color: $warning;
  fill: $warning;
  stroke: $warning;
}

.b-icon.danger {
  color: $danger;
  fill: $danger;
  stroke: $danger;
}

// Resolution
.b-icon.crisp {
  shape-rendering: crispEdges;
}

// Stroke
.b-icon.no-stroke {
  stroke-width: 0;
}