//
// Icon sizes
//
$icon-sizes: (
   xs: 0.75rem, // ~12px
   sm: 1rem, // ~16px
   md: 1.5rem, // ~24px
   lg: 2rem, // ~32px
   xl: 3rem, // ~48px
  xxl: 4.5rem, // ~72px
  xxxl: 7rem, // ~112px
  xxxxl: 9rem // ~144px
) !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);