@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../common/mixins" as *;
@use "mixins" as *;
@import "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700";
@import "https://fonts.googleapis.com/earlyaccess/notokufiarabic.css";

@font-face {
  font-family: "roboto fallback";
  font-style: normal;
  font-weight: 300;
  src:
    local("Roboto Light"),
    local("Roboto-Light"),
    url("fonts/Roboto-300.woff2") format("woff2"),
    url("fonts/Roboto-300.woff") format("woff"),
    url("fonts/Roboto-300.ttf") format("truetype");
}

@font-face {
  font-family: "roboto fallback";
  font-style: normal;
  font-weight: 400;
  src:
    local("Roboto"),
    local("Roboto-Regular"),
    url("fonts/Roboto-400.woff2") format("woff2"),
    url("fonts/Roboto-400.woff") format("woff"),
    url("fonts/Roboto-400.ttf") format("truetype");
}

@font-face {
  font-family: "roboto fallback";
  font-style: normal;
  font-weight: 500;
  src:
    local("Roboto Medium"),
    local("Roboto-Medium"),
    url("fonts/Roboto-500.woff2") format("woff2"),
    url("fonts/Roboto-500.woff") format("woff"),
    url("fonts/Roboto-500.ttf") format("truetype");
}

@font-face {
  font-family: "roboto fallback";
  font-style: normal;
  font-weight: 700;
  src:
    local("Roboto Bold"),
    local("Roboto-Bold"),
    url("fonts/Roboto-700.woff2") format("woff2"),
    url("fonts/Roboto-700.woff") format("woff"),
    url("fonts/Roboto-700.ttf") format("truetype");
}

.dx-theme-material-typography {
  background-color: $typography-bg;

  @include dx-base-typography();

  h1 {
    font-weight: 300;
    font-size: $material-h1-font-size;
    letter-spacing: -1.5px;
  }

  h2 {
    font-weight: 300;
    font-size: $material-h2-font-size;
    letter-spacing: -0.5px;
  }

  h3 {
    font-weight: 400;
    font-size: $material-h3-font-size;
  }

  h4 {
    font-weight: 400;
    font-size: $material-h4-font-size;
    letter-spacing: 0.25px;
  }

  h5 {
    font-weight: 400;
    font-size: $material-h5-font-size;
  }

  h6 {
    font-weight: 500;
    font-size: $material-h6-font-size;
    letter-spacing: 0.15px;
  }

  .dx-font-xl {
    font-size: $material-xl-font-size;
  }

  .dx-font-l {
    font-size: $material-l-font-size;
  }

  .dx-font-m {
    font-size: $material-m-font-size;
  }

  .dx-font-s {
    @include dx-s-font-mixin();
  }

  small,
  .dx-font-xs {
    font-size: $material-xs-font-size;
  }

  a {
    color: $typography-link-color;
  }
}