//
// Icon sizes
//
$icon-sizes: (
   xs: 0.625rem,
   sm: 0.750rem,
   md: 1rem,
   lg: 1.250rem,
   xl: 1.5rem,
  xxl: 2.5rem,
  xxxl: 4.5rem
) !default;


.x-icon-container {
  // Remove line-height for icons
  @extend %position-relative,
          %d-inline-flex;
  &.is-clickable {
    @extend %cursor-pointer;
    @include transition($btn-transition);
    color: theme-color("primary");
    @include x-hover-focus-active {
      color: theme-color("secondary");
    }
  }
}



.x-icon {
  // set height and width to 1em, so icon size will match its parent
  height: 1em;
  width:  1em;
  fill: currentColor;
}



@include x-icon-sizing($icon-sizes);