@charset "UTF-8";
@import 'constants/layered-fonts-map';

@mixin variable_icon_font($icon-code) {
  @if ($icon-code) {
    content: #{"\"\\"}#{$icon-code + "\""};
  }
}

.osiconbase {
  font-family: "srm" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.global-icon-throbber {
  background-image: url('data:image/gif;base64,R0lGODlhEAALAPQAAP///wAAANra2tDQ0Orq6gYGBgAAAC4uLoKCgmBgYLq6uiIiIkpKSoqKimRkZL6+viYmJgQEBE5OTubm5tjY2PT09Dg4ONzc3PLy8ra2tqCgoMrKyu7u7gAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCwAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA');
  background-position: center center;
  background-repeat: no-repeat;
  width: 16px;
  height: 11px;
  display: inline-block;
}

[data-icon]:before {
  @extend .osiconbase;
  content: attr(data-icon);
}

.osicon,
[class^="osicon-"] {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  height: .9em;
  width: 1em;
  zoom: 1; // ie7 inline-block hack
}

.osicon:before,
.osicon:after,
.osicon span:before,
.osicon span:after,
[class^="osicon-"]:before,
[class*=" osicon-"]:before,
[class^="osicon-"]:after,
[class*=" osicon-"]:after,
[class^="osicon-"] span:before,
[class*=" osicon-"] span:before,
[class^="osicon-"] span:after,
[class*=" osicon-"] span:after {
  @extend .osiconbase;
  display: block;
  position: absolute;
  white-space: normal;
  //font-size: 1em;
}

@function get_brand($brand) {
  @return map-get($brands, $brand);
}

@function get_content($brand, $level) {
  @return map-get(get_brand($brand), "#{$level}");
}

@function get_color($brand, $level) {
  @return map-get(get_brand($brand), "#{$level}-color");
}

@function is_multilayer($brand) {
  @return map-get(get_brand($brand), "multilayer");
}

// This builds the individual .osicon-<brand> classes
// based on the $brand mappings in constants/_layered-fonts-map.scss
@each $brand in map-keys($brands) {

  // $brand.name : $brand.multilayer

  @if is_multilayer($brand) {

    .osicon.osicon-#{$brand} {
      color: transparent;
    }
  }

  .osicon {
    &.osicon-#{$brand}:before {
      @include variable_icon_font(get_content($brand, l0));
      color: get_color($brand, l0);
    }

    &.osicon-#{$brand} > span:before {
      @include variable_icon_font(get_content($brand, l1));
      color: get_color($brand, l1);
    }

    &.osicon-#{$brand} > span:after {
      @include variable_icon_font(get_content($brand, l2));
      color: get_color($brand, l2);
    }

    &.osicon-#{$brand}:after {
      @include variable_icon_font(get_content($brand, l3));
      color: get_color($brand, l3);
    }
  }
}