@font-face {
  font-family: "Vocabulary Icons";
  src: url("../fonts/VocabularyIcons.woff") format("woff"),
  url("../fonts/VocabularyIcons.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

i.icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "Vocabulary Icons", monospace !important;
  speak: none;

  font-style: normal;
  font-weight: normal;
  font-variant: normal;

  text-transform: none;
  line-height: 1;

  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
}

$icons: (
  "chevron-up": "\e900",
  "chevron-right": "\e901",
  "chevron-down": "\e902",
  "chevron-left": "\e903",
  "angle-up": "\e904",
  "angle-right": "\e905",
  "angle-down": "\e906",
  "angle-left": "\e907",
  "caret-right": "\e908",
  "caret-down": "\e909",
  "caret-up": "\e90a",
  "caret-left": "\e90b",

  "tick": "\ea00",
  "cross": "\ea01",
  "circle-filled": "\ea02",
  "circle-outline": "\ea03",
  "globe": "\ea04",
  "info": "\ea05",
  "external-link": "\ea06",
  "search": "\ea07",
  "sort": "\ea08",
  "filter": "\ea09",
  "sliders": "\ea0a",
  "flag": "\ea0b",
  "question-circle": "\ea0c",
  "plus": "\ea0d",
  "minus": "\ea0e",
  "adjust": "\ea0f",
  "bookmark-regular": "\ea10",
  "bookmark-solid": "\ea11",
  "exclamation-circle": "\ea12",
  "bars": "\e90c",
  "envelope": "\ea13",
  "rss-square": "\ea14",
  "heart": "\1f49c",

  "cc-nd": "\229c",
  "cc-zero": "\1f10d",
  "cc-sa": "\1f10e",
  "cc-nc": "\1f10f",
  "cc-logo": "\1f16d",
  "cc-pd": "\1f16e",
  "cc-by": "\1f16f",

  "cc-nc-eu": "\ec03",
  "cc-nc-jp": "\ec04",
  "cc-remix": "\ec07",
  "cc-sampling-plus": "\ec08",
  "cc-sampling": "\ec09",
  "cc-share": "\ec0a",
  "cc-pd-alt": "\ec0d",
  "cc-letterheart": "\ec0e",
  "cc-letterheart-filled": "\ec0f",

  "instagram": "\ed00",
  "twitter": "\ed01",
  "linkedin": "\ed02",
  "facebook": "\ed03",
  "pinterest": "\ed04",
  "slack": "\ed05",
  "reddit": "\ed06",
  "github": "\ed07",
  "whatsapp": "\ed08",
  "tumblr": "\ed09",
  "sms": "\ed10",
  "messenger": "\ed11",
  "medium": "\ed12"
);

@mixin icon($icon-class, $icon-codepoint) {
  i.icon.#{$icon-class}:before {
    content: "#{$icon-codepoint}";
  }
}

@each $icon-class, $icon-codepoint in $icons {
  @include icon($icon-class, $icon-codepoint);
}

$instagram-brand: #e1306c;
$twitter-brand: #1da1f2;
$linkedin-brand: #0077b5;
$facebook-brand: #3b5998;
$pinterest-brand: #bd081c;
$slack-brand: #7c2852;
$reddit-brand: #ff4500;
$github-brand: #333333;
$whatsapp-brand: #25d366;
$tumblr-brand: #35465c;
$sms-brand: #4aae20;
$messenger-brand: #0084ff;
$medium-brand: #292929;
$brand-colors: (
  "facebook": $facebook-brand,
  "twitter": $twitter-brand,
  "instagram": $instagram-brand,
  "linkedin": $linkedin-brand,
  "pinterest": $pinterest-brand,
  "slack": $slack-brand,
  "reddit": $reddit-brand,
  "github": $github-brand,
  "whatsapp": $whatsapp-brand,
  "tumblr": $tumblr-brand,
  "sms": $sms-brand,
  "messenger": $messenger-brand,
  "medium": $medium-brand
);

@mixin branded-icon($icon-class, $icon-color) {
  i.icon.#{$icon-class}.colored:before {
    color: $icon-color;
  }
}

@each $icon-class, $icon-color in $brand-colors {
  @include branded-icon($icon-class, $icon-color);
}

.icon[class*="cc"] {
  &.has-background-white {
    background-image: radial-gradient(circle, #ffffff 60%, transparent 60%);
    background-color: transparent !important;
  }
}