@import "settings";

// ---------------------------------------------------------
// HOST FONT FILES LOCALLY (NOT ALWAYS INTERNET ACCESS)
// ---------------------------------------------------------

// MAIN FONT
@font-face {
  font-family: $font;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/#{$font}-Regular.ttf") format("truetype");
}

@font-face {
  font-family: $font;
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/#{$font}-Bold.ttf") format("truetype");
}

// ACCESS FONT
@font-face {
  font-family: $font-accent;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/#{$font-accent}-Regular.ttf") format("truetype");
}

// MATERIAL ICONS
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: local("Material Icons"),
  local("MaterialIcons-Regular"),
  url("../fonts/MaterialIcons-Regular.ttf") format("truetype");
}

.material-icons {
  font-family: "Material Icons";
  font-size: $mat-icon-size;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 0.8;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  cursor: pointer;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  // SUPPORT FOR WEBKIT BROWSERS
  -webkit-font-smoothing: antialiased;
  // SUPPORT FOR SAFARI AND CHROME
  text-rendering: optimizeLegibility;

  // SUPPORT FOR FIREFOX
  -moz-osx-font-smoothing: grayscale;

  // SUPPORT FOR IE
  font-feature-settings: "liga";

}

// MAT ICON
.mat-icon {
  cursor: pointer;
  font-size: $mat-icon-size !important;
  height: $mat-icon-size !important;
  line-height: $mat-icon-size !important;
  width: $mat-icon-size !important;

  &.small {
    font-size: $mat-icon-size-small !important;
    height: $mat-icon-size-small !important;
    line-height: $mat-icon-size-small !important;
    transform: rotate(0.03deg); // to fix icons being capped at smaller sizes
    width: $mat-icon-size-small !important;
  }

  &.large {
    font-size: $mat-icon-size-large !important;
    height: $mat-icon-size-large !important;
    line-height: $mat-icon-size-large !important;
    width: $mat-icon-size-large !important;
  }

}