// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Font definitions

/*
  Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license
*/

// Produce @font-face definitions for the web fonts.
@mixin ms-font-face($font-family-name, $cdn-folder, $cdn-font-name: 'segoeui') {
  @font-face {
    font-family: $font-family-name;
    src: url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff2') format('woff2'),
         url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff') format('woff');
    font-weight: $ms-font-weight-light;
    font-style: normal;
  }

  @font-face {
    font-family: $font-family-name;
    src: url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff2') format('woff2'),
         url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff') format('woff');
    font-weight: $ms-font-weight-semilight;
    font-style: normal;
  }

  @font-face {
    font-family: $font-family-name;
    src: url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff2') format('woff2'),
         url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff') format('woff');
    font-weight: $ms-font-weight-regular;
    font-style: normal;
  }

  @font-face {
    font-family: $font-family-name;
    src: url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff2') format('woff2'),
         url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff') format('woff');
    font-weight: $ms-font-weight-semibold;
    font-style: normal;
  }

  @font-face {
    font-family: $font-family-name;
    src: url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-bold.woff2') format('woff2'),
         url('#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-bold.woff') format('woff');
    font-weight: $ms-font-weight-bold;
    font-style: normal;
  }
}

// Generate overrides to set font-family based on the lang attribute.
@mixin ms-font-family-language-override($language-code, $font-family) {
  *[lang^='#{$language-code}'] .ms-Fabric,
  .ms-Fabric *[lang^='#{$language-code}'],
  .ms-Fabric[lang^='#{$language-code}'] {
    font-family: $font-family;
  }
}

// Super Styles (LIMITED USE)
@mixin ms-font-su {
  font-size: $ms-font-size-su;
  font-weight: $ms-font-weight-light;
}

// Extra-Extra-Large
@mixin ms-font-xxl {
  font-size: $ms-font-size-xxl;
  font-weight: $ms-font-weight-light;
}

// Extra-Large Styles
@mixin ms-font-xl-plus {
  font-size: $ms-font-size-xl-plus;
  font-weight: $ms-font-weight-light;
}

// Extra-Large Styles
@mixin ms-font-xl {
  font-size: $ms-font-size-xl;
  font-weight: $ms-font-weight-light;
}

// Large Styles
@mixin ms-font-l {
  font-size: $ms-font-size-l;
  font-weight: $ms-font-weight-semilight;
}

// Medium Plus Styles
@mixin ms-font-m-plus {
  font-size: $ms-font-size-m-plus;
  font-weight: $ms-font-weight-regular;
}

// Medium Styles
@mixin ms-font-m {
  font-size: $ms-font-size-m;
  font-weight: $ms-font-weight-regular;
}

// Small Plus Styles
@mixin ms-font-s-plus {
  font-size: $ms-font-size-s-plus;
  font-weight: $ms-font-weight-regular;
}

// Small Styles
@mixin ms-font-s {
  font-size: $ms-font-size-s;
  font-weight: $ms-font-weight-regular;
}

// XS Styles
@mixin ms-font-xs {
  font-size: $ms-font-size-xs;
  font-weight: $ms-font-weight-regular;
}

// Micro Styles (LIMITED USE)
@mixin ms-font-mi {
  font-size: $ms-font-size-mi;
  font-weight: $ms-font-weight-semibold;
}

//== Helper classes & mixins
//
// Helper mixins to override default type values

// Font weights
@mixin ms-fontWeight-light {
  font-weight: $ms-font-weight-light;
}

@mixin ms-fontWeight-semilight {
  font-weight: $ms-font-weight-semilight;
}

@mixin ms-fontWeight-regular {
  font-weight: $ms-font-weight-regular;
}

@mixin ms-fontWeight-semibold {
  font-weight: $ms-font-weight-semibold;
}

@mixin ms-fontWeight-bold {
  font-weight: $ms-font-weight-bold;
}

// Font sizes
@mixin ms-fontSize-su {
  font-size: $ms-font-size-su;
}

@mixin ms-fontSize-xxl {
  font-size: $ms-font-size-xxl;
}

@mixin ms-fontSize-xlPlus {
  font-size: $ms-font-size-xl-plus;
}

@mixin ms-fontSize-xl {
  font-size: $ms-font-size-xl;
}

@mixin ms-fontSize-l {
  font-size: $ms-font-size-l;
}

@mixin ms-fontSize-mPlus {
  font-size: $ms-font-size-m-plus;
}

@mixin ms-fontSize-m {
  font-size: $ms-font-size-m;
}

@mixin ms-fontSize-sPlus {
  font-size: $ms-font-size-s-plus;
}

@mixin ms-fontSize-s {
  font-size: $ms-font-size-s;
}

@mixin ms-fontSize-xs {
  font-size: $ms-font-size-xs;
}

@mixin ms-fontSize-mi {
  font-size: $ms-font-size-mi;
}

// Theme colors
@mixin ms-fontColor-themeDarker {
  color: $ms-color-themeDarker;
}

@mixin ms-fontColor-themeDark {
  color: $ms-color-themeDark;
}

@mixin ms-fontColor-themeDarkAlt {
  color: $ms-color-themeDarkAlt;
}

@mixin ms-fontColor-themePrimary {
  color: $ms-color-themePrimary;
}

@mixin ms-fontColor-themeSecondary {
  color: $ms-color-themeSecondary;
}

@mixin ms-fontColor-themeTertiary {
  color: $ms-color-themeTertiary;
}

@mixin ms-fontColor-themeLight {
  color: $ms-color-themeLight;
}

@mixin ms-fontColor-themeLighter {
  color: $ms-color-themeLighter;
}

@mixin ms-fontColor-themeLighterAlt {
  color: $ms-color-themeLighterAlt;
}


// Neutral colors
@mixin ms-fontColor-black {
  color: $ms-color-black;
}

@mixin ms-fontColor-neutralDark {
  color: $ms-color-neutralDark;
}

@mixin ms-fontColor-neutralPrimary {
  color: $ms-color-neutralPrimary;
}

@mixin ms-fontColor-neutralPrimaryAlt {
  color: $ms-color-neutralPrimaryAlt;
}

@mixin ms-fontColor-neutralSecondary {
 color: $ms-color-neutralSecondary;
}

@mixin ms-fontColor-neutralSecondaryAlt {
  color: $ms-color-neutralSecondaryAlt;
}

@mixin ms-fontColor-neutralTertiary {
  color: $ms-color-neutralTertiary;
}

@mixin ms-fontColor-neutralTertiaryAlt {
  color: $ms-color-neutralTertiaryAlt;
}

@mixin ms-fontColor-neutralQuaternary {
  color: $ms-color-neutralQuaternary;
}

@mixin ms-fontColor-neutralQuaternaryAlt {
  color: $ms-color-neutralQuaternaryAlt;
}

@mixin ms-fontColor-neutralLight {
  color: $ms-color-neutralLight;
}

@mixin ms-fontColor-neutralLighter {
  color: $ms-color-neutralLighter;
}

@mixin ms-fontColor-neutralLighterAlt {
  color: $ms-color-neutralLighterAlt;
}

@mixin ms-fontColor-white {
  color: $ms-color-white;
}

// Brand and accent colors
@mixin ms-fontColor-yellow {
  color: $ms-color-yellow;
}

@mixin ms-fontColor-yellowLight {
  color: $ms-color-yellowLight;
}

@mixin ms-fontColor-orange {
  color: $ms-color-orange;
}

@mixin ms-fontColor-orangeLight {
  color: $ms-color-orangeLight;
}

@mixin ms-fontColor-orangeLighter {
  color: $ms-color-orangeLighter;
}

@mixin ms-fontColor-redDark {
  color: $ms-color-redDark;
}

@mixin ms-fontColor-red {
  color: $ms-color-red;
}

@mixin ms-fontColor-magentaDark {
  color: $ms-color-magentaDark;
}

@mixin ms-fontColor-magenta {
  color: $ms-color-magenta;
}

@mixin ms-fontColor-magentaLight {
  color: $ms-color-magentaLight;
}

@mixin ms-fontColor-purpleDark {
  color: $ms-color-purpleDark;
}

@mixin ms-fontColor-purple {
  color: $ms-color-purple;
}

@mixin ms-fontColor-purpleLight {
  color: $ms-color-purpleLight;
}

@mixin ms-fontColor-blueDark {
  color: $ms-color-blueDark;
}

@mixin ms-fontColor-blueMid {
  color: $ms-color-blueMid;
}

@mixin ms-fontColor-blue {
  color: $ms-color-blue;
}

@mixin ms-fontColor-blueLight {
  color: $ms-color-blueLight;
}

@mixin ms-fontColor-tealDark {
  color: $ms-color-tealDark;
}

@mixin ms-fontColor-teal {
  color: $ms-color-teal;
}

@mixin ms-fontColor-tealLight {
  color: $ms-color-tealLight;
}

@mixin ms-fontColor-greenDark {
  color: $ms-color-greenDark;
}

@mixin ms-fontColor-green {
  color: $ms-color-green;
}

@mixin ms-fontColor-greenLight {
  color: $ms-color-greenLight;
}

// Message colors
@mixin ms-fontColor-info {
  color: $ms-color-info;
}

@mixin ms-fontColor-success {
  color: $ms-color-success;
}

@mixin ms-fontColor-alert { // @todo: Deprecated: Use ms-fontColor-severeWarning
  color: $ms-color-alert;
}

@mixin ms-fontColor-warning {
  color: $ms-color-warning;
}

@mixin ms-fontColor-severeWarning {
  color: $ms-color-severeWarning;
}

@mixin ms-fontColor-error {
  color: $ms-color-error;
}