@font-face {
  font-family: 'slate';
  src:font-url('slate.eot?-syv14m');
  src:font-url('slate.eot?#iefix-syv14m') format('embedded-opentype'),
    font-url('slate.woff2?-syv14m') format('woff2'),
    font-url('slate.woff?-syv14m') format('woff'),
    font-url('slate.ttf?-syv14m') format('truetype'),
    font-url('slate.svg?-syv14m#slate') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'accc';
  src:font-url('accc.eot?-syv14m');
  src:font-url('accc.eot?#iefix-syv14m') format('embedded-opentype'),
  font-url('accc.woff?-syv14m') format('woff'),
  font-url('accc.ttf?-syv14m') format('truetype'),
  font-url('accc.svg?-syv14m#accc') format('svg');
  font-weight: normal;
  font-style: normal;
}

%icon {
  font-family: 'slate';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

%accc_icon {
  @extend %icon;
  font-family: 'accc';
}

%icon-exclamation-sign {
  @extend %icon;
  content: "\e600";
}
%icon-info-sign {
  @extend %icon;
  content: "\e602";
}
%icon-ok-sign {
  @extend %icon;
  content: "\e606";
}
%icon-search {
  @extend %icon;
  content: "\e607";
}

%icon-check {
  @extend %accc_icon;
  color: limegreen;
  content: "\f00c";
}

%icon-close {
  @extend %accc_icon;
  color: red;
  content: "\f00d";
}
