@use "sass:map";
@use "sass:meta";
@use "sass:string";
/* MaterialDesignIcons.com */

@font-face {
  font-family: 'material-design-icons';
  src: url('fonts/material-design-icons.eot');
  src: url('fonts/material-design-icons.eot') format('embedded-opentype'),
    url('fonts/material-design-icons.woff2') format('woff2'),
    url('fonts/material-design-icons.woff') format('woff'),
    url('fonts/material-design-icons.ttf') format('truetype'),
    url('fonts/material-design-icons.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

$mdi-icons: (
  account-outline: '\F013',
  atom: '\F767',
  bell: '\F014',
  cellphone-iphone: '\F120',
  check: '\F12C',
  email-outline: '\F1F0',
  link-variant: '\F339',
  map-marker: '\F015',
  account-multiple: '\F00E'
);

%mdi,
[class^='mdi-']::before,
[class*=' mdi-']::before,
[class^='children-mdi-'] *::before,
[class*=' children-mdi-'] *::before {
  display: inline-block;
  font-family: 'material-design-icons' !important;
  font-size: 25px;
  font-style: normal;
  font-weight: normal;
  line-height: 0.5em;
  margin-left: -0.15em;
  text-align: center;
  text-decoration: inherit;
  width: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
}

@function char($character-code) {
  @if meta.function-exists("selector-append") {
    @return string.unquote("\"\\#{$character-code}\"");
  }

  @if "\\#{'x'}" == "\\x" {
    @return string.slice("\x", 1, 1) + $character-code;
  }
  @else {
    @return #{"\"\\"}#{$character-code + "\""};
  }
}

@function mdi($name) {
  @if map.has-key($mdi-icons, $name) == false {
    @warn "Icon #{$name} not found.";
    @return "";
  }
  @return char(map.get($mdi-icons, $name));
}

@each $key, $value in $mdi-icons {
  .mdi-#{$key}:before {
    content: char($value);
  }

  .children-mdi-#{$key} *:before {
    content: char($value);
  }
}

@mixin mdi($value) {
  &:before {
    @extend %mdi;
    @extend .mdi-#{$value};
  }
}

@mixin mdi($value) {
  *:before {
    @extend %mdi;
    @extend .children-mdi-#{$value};
  }
}


.mdi-blank:before,
.children-mdi-blank *:before {
  content: "\F68C";
  visibility: hidden;
}