@import "../extensions/string.js";
// Add in extra CSS Variables if that's your thing

@if ($enable-css-variables) {
  #{$css-variable-selector} {
    --dark-mode: export;
    --base-color: export;
    --base-highlight-color: export;
    --base-light-color: export;
    --base-dark-color: export;
    --base-pressed-color: export;
    --base-focused-color: export;
    --base-invisible-color: export;
    --base-foreground-color: export;
    --accent-color: export;
    --accent-light-color: export;
    --accent-dark-color: export;
    --accent-pressed-color: export;
    --accent-invisible-color: export;
    --accent-foreground-color: export;
    --confirm-color: export;
    --confirm-pressed-color: export;
    --alert-color: export;
    --alert-pressed-color: export;
    --color: export;
    --reverse-color: export;
    --highlight-color: export;
    --disabled-color: export;
    --reverse-disabled-color: export;
    --divider-color: export;
    --selected-background-color: export;
    --hovered-background-color: export;
    --header-background-color: export;
    --faded-color: export;
    --background-color: export;
    --alt-background-color: export;
    --reverse-background-color: export;
    --reverse-alt-background-color: export;
    --overlay-color: export;
    --content-padding: export;
    --listitem-selected-background-color: export;
    --reverse-border-color: export;
    --reverse-alt-border-color: export;
  }
}

// Includes all Material Design colors as classes
@if ($enable-color-classes) {
  @each $color-name, $color-variants in $material-colors {
    @each $color-variant, $hex-value in $color-variants {
      .color-#{$color-name}-#{$color-variant} {
        color: #{$hex-value}
      }
      .bg-color-#{$color-name}-#{$color-variant} {
        background-color: #{$hex-value}
      }
    }
  }
}

// Add all the icons
@if ($enable-all-icon-classes) {
  @each $icon in $material-icons {
    @include material-icon-class($icon);
  }
}

$font-path: get-resource-path('fonts');
$roboto-path: $font-path + '/roboto';
@font-face {
  font-family: 'Roboto';
  font-weight: 400; //normal
  font-style: normal;
  // Chrome for md does not properly support local 'Roboto' https://code.google.com/p/chromium/issues/detail?id=536928 // Chrome also does not properly respect weights for local fonts https://code.google.com/p/chromium/issues/detail?id=578275
  src: local('Roboto Regular'), local('Roboto-Regular'), url($roboto-path + '/Roboto-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 100;
  font-style: normal;
  // Chrome for md does not properly support local 'Roboto' https://code.google.com/p/chromium/issues/detail?id=536928
  // Chrome also does not properly respect weights for local fonts https://code.google.com/p/chromium/issues/detail?id=578275
  src: local('Roboto Light'), local('Roboto-Light'), url($roboto-path + '/Roboto-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 600;
  font-style: normal;
  // Chrome for md does not properly support local 'Roboto' https://code.google.com/p/chromium/issues/detail?id=536928
  // Chrome also does not properly respect weights for local fonts https://code.google.com/p/chromium/issues/detail?id=578275
  src: local('Roboto Medium'), local('Roboto-Medium'), url($roboto-path + '/Roboto-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 900;
  font-style: normal;
  // Chrome for md does not properly support local 'Roboto' https://code.google.com/p/chromium/issues/detail?id=536928
  // Chrome also does not properly respect weights for local fonts https://code.google.com/p/chromium/issues/detail?id=578275
  src: local('Roboto Bold'), local('Roboto-Bold'), url($roboto-path + '/Roboto-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-weight: normal;
  font-style: italic;
  // Chrome for md does not properly support local 'Roboto' https://code.google.com/p/chromium/issues/detail?id=536928
  // Chrome also does not properly respect weights for local fonts https://code.google.com/p/chromium/issues/detail?id=578275
  src: local('Roboto Italic'), local('Roboto-Italic'), url($roboto-path + '/Roboto-Italic.ttf') format('truetype');
}

// From https://github.com/google/material-design-icons
// All Icons are listed here https://design.google.com/icons/
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
  local('MaterialIcons-Regular'),
  url($font-path + '/MaterialIcons-Regular.ttf') format('truetype');
}

html, body {
  font-family: 'Roboto', sans-serif;
  color: $color;
}

$loading-spinner-color: dynamic(#aaa);