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


.x-icon-container {
  position: relative;
  display: inline-flex;

  &.is-clickable {
    cursor: pointer;
    @include transition($btn-transition);
    @include custom-theme-color(primary, color);

    @include x-hover-focus-active {
      @include custom-theme-color(seondary, color);
    }
  }
}



.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);