/**
 * Icons
 */

// Dependencies
@import 'config/variables';
@import 'config/cdn';
@import 'config/icons';
@import 'config/media';
@import 'config/dimensions';
@import 'config/fonts';
@import 'scss/functions/str-replace';
@import 'bourbon/app/assets/stylesheets/addons/size';

// Declarations
[class*='icon-'] {
  overflow: visible !important;
  max-width: 100%;
}

[class*='bg-icon-'] {
  display: inline-block;
}

@each $key, $var in map-get($variables, 'icons') {
  $path: $key;

  @each $str in map-get($variables, 'icons-variants') {
    $path: str-replace($path, $str);
  }

  .bg-#{$key} {
    @include size($var);
    background-image: url('#{$cdn}#{$path-to-svg}#{$path}.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center
  }

  .#{$key} {
    @include size($var);
  }
}

@import 'elements/icons/icons-checklist';
@import 'elements/icons/icons-subway';
@import 'elements/icons/icons-ui';

// Create our responsive icon size utilty
@include screens {
  @include iconSizes($variant);
}