@font-face {
  font-family: 'sg-icons';
  src: url('sg-fonts/fonts/sg-icons.ttf') format('truetype'),
    url('sg-fonts/fonts/sg-icons.woff') format('woff'),
    url('sg-fonts/fonts/sg-icons.svg#sg-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

%sg-icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'sg-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@function unicode($str) {
  @return unquote('\"') + $str + unquote('\"');
}

@mixin sg-icon-before($icon) {
  &:before {
    content: unicode($icon);
    @extend %sg-icon;
  }
}

@mixin sg-icon-after($icon) {
  &:after {
    content: unicode($icon);
    @extend %sg-icon;
  }
}

@import 'sg-icons_generated';

.sg-icons {
  display: flex;
  flex-wrap: wrap;

  &_tile {
    padding: 1em;
    flex: 0 1 100%;

    @include media('>xs') {
      flex: 0 1 50%;
    }

    @include media('>sm') {
      flex: 0 1 (1/3 * 100%);
    }

    @include media('>md') {
      flex: 0 1 25%;
    }

    [class*='sg-icon-'] {
      font-size: calc(1em + 1vw);
    }

    span {
      color: $sg-warm-grey;
      display: block;
    }
  }
}