/// <reference path="variables_and_mixins" />
@import "colors";

@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Thin.woff2") format("woff2"), url("fonts/Roboto-Thin.woff") format("woff"), url("fonts/Roboto-Thin.ttf") format("truetype");
  font-weight: 200;
}

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

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

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

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

$base: 62.5%;
/*10 px */
$base-small: 16px;
$base-font-size: 1rem;
$base-line-height: 1.375rem;

$h1-font-size: 2.375rem;
$h1-lines: 2;
$h1-line-height: $base-line-height * $h1-lines;
$h1-margin-top: 2 * $base-line-height;
$h1-margin-bottom: 1 * $base-line-height;

/*#region Typografy*/
$color-text-display-3: rgba(0, 0, 0, 0.54) !default;
$color-text-display-2: rgba(0, 0, 0, 0.54) !default;
$color-text-display-1: rgba(0, 0, 0, 0.54) !default;
$color-text-headline: rgba(0, 0, 0, 0.87) !default;
$color-text-title: rgba(0, 0, 0, 0.87) !default;
$color-text-subhead: rgba(0, 0, 0, 0.87) !default;
$color-text-body-2: rgba(0, 0, 0, 0.87) !default;
$color-text-body-1: rgba(0, 0, 0, 0.87) !default;
$color-text-caption: rgba(0, 0, 0, .54) !default;
$color-text-medium: rgba(0, 0, 0, 0.87) !default;
$color-text-button: rgba(255, 255, 255, 0.87) !default;

//## Alpha values for grey text, icons, and dividers
$gray-darker: #212121; // #212121 - text
$gray-dark: #757575; // #757575 - secondary text, icons
$gray: #bdbdbd; // #bdbdbd - hint text
$gray-light: #e0e0e0; // #e0e0e0 - divider
$gray-lighter: #f5f5f5; // #f5f5f5 - background

//** Typographic Scale
$font-size-display-4: 112;
$font-size-display-3: 56;
$font-size-display-2: 45;
$font-size-display-1: 34;
$font-size-headline: 24;
$font-size-title: 20;
$font-size-subhead-2: 15;
$font-size-subhead-1: 15;
$font-size-body-2: 13;
$font-size-body-1: 13;
$font-size-caption: 12;
$font-size-label: 12;
$font-size-menu: 13;
$font-size-button: 14;

//** Basic Styles
$font-weight-display-4: 100;
$font-weight-display-3: 300;
$font-weight-display-2: 300;
$font-weight-display-1: 300;
$font-weight-headline: 300;
$font-weight-title: 400;
$font-weight-subhead-2: 400;
$font-weight-subhead-1: 300;
$font-weight-body-2: 400;
$font-weight-body-1: 300;
$font-weight-caption: 300;
$font-weight-label: 300;
$font-weight-menu: 400;
$font-weight-button: 400;
//** Line Height
$line-height-display-4: 128;
$line-height-display-3: 84;
$line-height-display-2: 48;
$line-height-display-1: 40;
$line-height-headline: 32;
$line-height-title: 28;
$line-height-subhead-2: 28;
$line-height-subhead-1: 24;
$line-height-body-2: 24;
$line-height-body-1: 20;
$line-height-caption: 20;
$line-height-label: 20;
$line-height-menu: 20;
$line-height-button: 20;

//** Tracking and kerning
$letter-spacing-display-4: -0.1;
$letter-spacing-display-3: -0.05;
$letter-spacing-display-2: 0;
$letter-spacing-display-1: 0;
$letter-spacing-headline: 0;
$letter-spacing-title: 0.05;
$letter-spacing-subhead-2: 0.1;
$letter-spacing-subhead-1: 0.1;
$letter-spacing-body-2: 0.1;
$letter-spacing-body-1: 0.1;
$letter-spacing-caption: 0.2;
$letter-spacing-label: 0.1;
$letter-spacing-menu: 0.1;
$letter-spacing-button: 0.1;

//** Basic colors/Color contrast
$font-color-display-4: $gray-dark;
$font-color-display-3: $gray-dark;
$font-color-display-2: $gray-dark;
$font-color-display-1: $gray-dark;
$font-color-headline: $gray-darker;
$font-color-title: $gray-darker;
$font-color-subhead-2: $gray-darker;
$font-color-subhead-1: $gray-darker;
$font-color-body-2: $gray-darker;
$font-color-body-1: $gray-darker;
$font-color-caption: $gray-dark;
$font-color-label: $gray-darker;
$font-color-menu: $gray-darker;
$font-color-button: $gray-darker;

html, body {
  font-family: 'Roboto' !important;
  font-size: 62.5%; // For rem units support
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.text {
  font-family: 'Roboto';
  -webkit-font-smoothing: antialiased;
  width: 100%;
  color: $color-light-text-primary;

  &.text-ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &.font-thin {
    font-weight: 200 !important;
  }
  &.font-light {
    font-weight: 300 !important;
  }
  &.font-regular {
    font-weight: 400 !important;
  }
  &.font-medium {
    font-weight: 500 !important;
  }
  &.font-bold {
    font-weight: 700 !important;
  }
  &.text-display-4 {
    @include fontFunction($font-size-display-4, $line-height-display-4, $letter-spacing-display-4);
    font-weight: $font-weight-display-4;
    color: $font-color-display-4;
    text-transform: inherit;
  }
  &.text-display-3 {
    @include fontFunction($font-size-display-3, $line-height-display-3, $letter-spacing-display-3);
    font-weight: $font-weight-display-3;
    color: $font-color-display-3;
    text-transform: inherit;
  }
  &.text-display-2 {
    @include fontFunction($font-size-display-2, $line-height-display-2, $letter-spacing-display-2);
    font-weight: $font-weight-display-2;
    color: $font-color-display-2;
    text-transform: inherit;
  }
  &.text-display-1 {
    @include fontFunction($font-size-display-1, $line-height-display-1, $letter-spacing-display-1);
    font-weight: $font-weight-display-1;
    color: $font-color-display-1;
    text-transform: inherit;
  }
  &.text-headline {
    @include fontFunction($font-size-headline, $line-height-headline, $letter-spacing-headline);
    font-weight: $font-weight-headline;
    color: $font-color-headline;
    text-transform: inherit;
  }
  &.text-title {
    @include fontFunction($font-size-title, $line-height-title, $letter-spacing-title);
    font-weight: $font-weight-title;
    color: $font-color-title;
    text-transform: inherit;
  }
  &.text-subhead-2 {
    @include fontFunction($font-size-subhead-2, $line-height-subhead-2, $letter-spacing-subhead-2);
    font-weight: $font-weight-subhead-2;
    color: $font-color-subhead-2;
    text-transform: inherit;
  }

  &.text-subhead-1 {
    @include fontFunction($font-size-subhead-1, $line-height-subhead-1, $letter-spacing-subhead-1);
    font-weight: $font-weight-subhead-1;
    color: $font-color-subhead-1;
    text-transform: inherit;
  }

  &.text-body-2 {
    @include fontFunction($font-size-body-2, $line-height-body-2, $letter-spacing-body-2);
    font-weight: $font-weight-body-2;
    color: $font-color-body-2;
    text-transform: inherit;
  }

  &.text-body-1 {
    @include fontFunction($font-size-body-1, $line-height-body-1, $letter-spacing-body-1);
    font-weight: $font-weight-body-1;
    color: $font-color-body-1;
    text-transform: inherit;
  }

  &.text-label {
    @include fontFunction($font-size-label, $line-height-label, $letter-spacing-label);
    font-weight: $font-weight-label;
    color: $font-color-label;
    text-transform: inherit;
  }

  &.text-caption {
    @include fontFunction($font-size-caption, $line-height-caption, $letter-spacing-caption);
    font-weight: $font-weight-caption;
    color: $font-color-caption;
    text-transform: inherit;
  }

  &.text-menu {
    @include fontFunction($font-size-menu, $line-height-menu, $letter-spacing-menu);
    font-weight: $font-weight-menu;
    color: $font-color-menu;
    text-transform: inherit;
  }

  &.text-button {
    @include fontFunction($font-size-button, $line-height-button, $letter-spacing-button);
    font-weight: $font-weight-button;
    color: $font-color-button;
    text-transform: uppercase;
  }

  /*Align*/
  &.text--align-left {
    text-align: left;
  }

  &.text--align-right {
    text-align: right;
  }

  &.text--align-center {
    text-align: center;
  }

  &.text--align-justify {
    text-align: justify;
  }

  &.text-nowrap {
    white-space: nowrap;
  }

  &.text-lowercase {
    text-transform: lowercase;
  }

  &.text-uppercase {
    text-transform: uppercase;
  }

  &.text-capitalize {
    text-transform: capitalize;
  }

  &.text-muted {
    color: #777;
  }

  &.text-color-primary {
    color: $color-primary !important;
  }

  &.text-color-accent {
    color: $color-accent !important;
  }

  &.text-color-success {
    color: $color-success !important;
  }

  &.text-color-info {
    color: $color-info !important;
  }

  &.text-color-warning {
    color: $color-warning !important;
  }

  &.text-color-danger {
    color: $color-danger !important;
  }

  &.text-color-white {
    color: $color-white !important;
  }

  &.theme-light {
    &.text-color-secondary {
      color: $color-secondary-light;
    }
  }


  &.theme-dark {
    &.text-color-secondary {
      color: $color-secondary-dark !important;
    }

  }

}