/* ==================================
   #ICONS
   ================================== */

/* Variables
   ========================================================================== */

$au-icon-size: var(--au-icon-size) !default;
$au-icon-size-medium: var(--au-icon-size-medium) !default;
$au-icon-size-large: var(--au-icon-size-large) !default;

/* Component
   ========================================================================== */

.au-c-icon {
  display: inline-block;
  width: $au-icon-size;
  height: $au-icon-size;
  position: relative;
  vertical-align: baseline;
  bottom: 0.05ex;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

/* Modifiers
  ========================================================================== */

.au-c-icon--medium {
  width: $au-icon-size-medium;
  height: $au-icon-size-medium;
}

.au-c-icon--large {
  width: $au-icon-size-large;
  height: $au-icon-size-large;
}

.au-c-icon--left {
  margin-right: $au-unit-tiny;
}

.au-c-icon--right {
  margin-left: $au-unit-tiny;
}