$labs-palette-blue-grey: (
  50: #e7e8eb,
  100: #c2c5cc,
  200: #999eab,
  300: #707789,
  400: #525a6f,
  500: #333d56,
  600: #2e374f,
  700: #272f45,
  800: #20273c,
  900: #141a2b,
  A100: #6e8cff,
  A200: #3b64ff,
  A400: #083cff,
  A700: #0032ed,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #ffffff,
    A400: #ffffff,
    A700: #ffffff
  )
);

// Alias for alternate spelling.
$labs-palette-blue-gray: $labs-palette-blue-grey;

$labs-palette-light-blue-grey: (
  50: #f1f3f7,
  100: #dce0ea,
  200: #c5ccdc,
  300: #adb7ce,
  400: #9ca7c4,
  500: #8a98b9,
  600: #8290b2,
  700: #7785aa,
  800: #6d7ba2,
  900: #5a6a93,
  A100: #fdfeff,
  A200: #cad8ff,
  A400: #97b3ff,
  A700: #7ea0ff,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #000000,
    500: #000000,
    600: #000000,
    700: #000000,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000
  )
);

// Alias for alternate spelling.
$labs-palette-light-blue-gray: $labs-palette-light-blue-grey;

$labs-palette-deep-orange: (
  50: #fceae7,
  100: #f7ccc3,
  200: #f1aa9c,
  300: #eb8774,
  400: #e76e56,
  500: #e35438,
  600: #e04d32,
  700: #dc432b,
  800: #d83a24,
  900: #d02917,
  A100: #ffffff,
  A200: #ffd3cf,
  A400: #ffa49c,
  A700: #ff8d83,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #000000,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000
  )
);

$labs-info: #008bba;
$labs-warn: #f9a562;
$labs-error: #f04748;
$labs-success: #18b6a0;

// Represents a collection of major breakpoints
@function labs-breakpoints-config() {
  @return (xs: 576px, sm: 768px, md: 992px, lg: 1200px, xl: 1440px);
}

/// Checks if $value is a map
/// @param {any} $value - The value to check
/// @return {Boolean} - true if map / false if not map
@function labs-is-map($value) {
  @return type-of($value) == 'map';
}

@import '~@angular/material/theming';

// Creates a container object for a dark theme to be given to individual component theme mixins.
@function labs-mat-dark-theme(
  $primary: mat-palette($labs-palette-light-blue-gray),
  $accent: mat-palette($labs-palette-deep-orange),
  $warn: mat-palette($mat-red),
  $foreground: null,
  $background: null
) {
  $mat-dark-theme-foreground: map-merge(
    $mat-dark-theme-foreground,
    (
      header-bar: white,
      footer: white
    )
  ) !global;

  @if labs-is-map($foreground) {
    $mat-dark-theme-foreground: map-merge(
      $mat-dark-theme-foreground,
      $foreground
    ) !global;
  }

  $mat-dark-theme-background: map-merge(
    $mat-dark-theme-background,
    (
      header-bar: black,
      footer: black
    )
  ) !global;

  @if labs-is-map($background) {
    $mat-dark-theme-background: map-merge(
      $mat-dark-theme-background,
      $background
    ) !global;
  }

  @return mat-dark-theme($primary, $accent, $warn);
}

// Creates a container object for a light theme to be given to individual component theme mixins.
@function labs-mat-light-theme(
  $primary: mat-palette($labs-palette-blue-gray),
  $accent: mat-palette($labs-palette-deep-orange),
  $warn: mat-palette($mat-red),
  $foreground: null,
  $background: null
) {
  $mat-light-theme-foreground: map-merge(
    $mat-light-theme-foreground,
    (
      header-bar: white,
      footer: white
    )
  ) !global;

  @if labs-is-map($foreground) {
    $mat-light-theme-foreground: map-merge(
      $mat-light-theme-foreground,
      $foreground
    ) !global;
  }

  $mat-light-theme-background: map-merge(
    $mat-light-theme-background,
    (
      header-bar: linear-gradient(90deg, black 0%, #{mat-color($primary)} 100%),
      footer: black
    )
  ) !global;

  @if labs-is-map($background) {
    $mat-light-theme-background: map-merge(
      $mat-light-theme-background,
      $background
    ) !global;
  }

  @return mat-light-theme($primary, $accent, $warn);
}

// Represents a collection of typography levels.
@function labs-typography-config(
  $font-family: '"Lato", "Helvetica Neue", sans-serif',
  $display-4: mat-typography-level(88px, 96px, 300, $letter-spacing: -0.05em),
  $display-3: mat-typography-level(80px, 88px, 300, $letter-spacing: -0.02em),
  $display-2: mat-typography-level(72px, 80px, 300, $letter-spacing: -0.005em),
  $display-1: mat-typography-level(64px, 72px, 300),
  $headline: mat-typography-level(56px, 64px, 300),
  $title: mat-typography-level(48px, 56px, 300),
  $subheading-2: mat-typography-level(32px, 40px, 300),
  $subheading-1: mat-typography-level(24px, 32px, 700),
  $body-2: mat-typography-level(16px, 24px, 700),
  $body-1: mat-typography-level(16px, 24px, 400),
  $caption: mat-typography-level(13px, 16px, 400),
  $button: mat-typography-level(16px, 16px, 700),
  $input: mat-typography-level(inherit, 1.125, 400)
) {
  @return mat-typography-config(
    $font-family,
    $display-4,
    $display-3,
    $display-2,
    $display-1,
    $headline,
    $title,
    $subheading-2,
    $subheading-1,
    $body-2,
    $body-1,
    $caption,
    $button,
    $input
  );
}

/// Scales 8px N times
/// @param {Number} $multiplier - Number to multiply 8px by
/// @return {String} - Scaled value in px
@function labs-scale-8px($multiplier: 1) {
  @return 8px * $multiplier;
}

// Adds default font-face rules
@mixin labs-default-font-faces() {
  /* latin-ext */
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Lato Light'), local('Lato-Light'),
      url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh7USSwaPGQ3q5d0N7w.woff2)
        format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  /* latin */
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Lato Light'), local('Lato-Light'),
      url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2)
        format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
      U+2215, U+FEFF, U+FFFD;
  }

  /* latin-ext */
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Lato Regular'), local('Lato-Regular'),
      url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2)
        format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  /* latin */
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Lato Regular'), local('Lato-Regular'),
      url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2)
        format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
      U+2215, U+FEFF, U+FFFD;
  }

  /* latin-ext */
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Lato Bold'), local('Lato-Bold'),
      url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2)
        format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
      U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  /* latin */
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Lato Bold'), local('Lato-Bold'),
      url(https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2)
        format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
      U+2215, U+FEFF, U+FFFD;
  }
}

// Material resets - use sparingly
@mixin labs-mat-resets() {
  // Allows a mat-icon to vertically align correctly in a mat-button
  // https://github.com/angular/components/issues/8842#issuecomment-457664561
  .mat-button .mat-icon,
  .mat-raised-button .mat-icon,
  .mat-flat-button .mat-icon,
  .mat-stroked-button .mat-icon {
    vertical-align: top !important;
    line-height: inherit;
  }

  // Fixes mat-icon vertical alignment
  .mat-icon-button {
    line-height: 0 !important;
  }

  // Makes mat-card fill flex container by default
  mat-card {
    flex: 1;
  }

  // Make mat-list fill width of container
  mat-list {
    width: 100%;
  }
}

$material-icons-font-path: '~material-icons/iconfont/';
@import '~material-icons/iconfont/variables';
@import '~material-icons/iconfont/mixins';

@mixin labs-material-icons() {
  @font-face {
    font-family: $material-icons-font-family;
    font-style: normal;
    font-weight: 400;
    src: url('#{$material-icons-font-file}.eot'); /* For IE6-8 */
    src: local($material-icons-font-family), local($material-icons-font-name),
      url('#{$material-icons-font-file}.woff2') format('woff2'),
      url('#{$material-icons-font-file}.woff') format('woff'),
      url('#{$material-icons-font-file}.ttf') format('truetype');
  }

  .material-icons {
    @include material-icons();
  }
}

@mixin labs-normalize() {
  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

  /* Document
   ========================================================================== */

  /**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

  html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }

  /* Sections
   ========================================================================== */

  /**
 * Remove the margin in all browsers.
 */

  body {
    margin: 0;
  }

  /**
 * Render the `main` element consistently in IE.
 */

  main {
    display: block;
  }

  /**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }

  /* Grouping content
   ========================================================================== */

  /**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }

  /**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }

  /* Text-level semantics
   ========================================================================== */

  /**
 * Remove the gray background on active links in IE 10.
 */

  a {
    background-color: transparent;
  }

  /**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }

  /**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

  b,
  strong {
    font-weight: bolder;
  }

  /**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }

  /**
 * Add the correct font size in all browsers.
 */

  small {
    font-size: 80%;
  }

  /**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  /* Embedded content
   ========================================================================== */

  /**
 * Remove the border on images inside links in IE 10.
 */

  img {
    border-style: none;
  }

  /* Forms
   ========================================================================== */

  /**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }

  /**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

  button,
  input {
    /* 1 */
    overflow: visible;
  }

  /**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

  button,
  select {
    /* 1 */
    text-transform: none;
  }

  /**
 * Correct the inability to style clickable types in iOS and Safari.
 */

  button,
  [type='button'],
  [type='reset'],
  [type='submit'] {
    -webkit-appearance: button;
  }

  /**
 * Remove the inner border and padding in Firefox.
 */

  button::-moz-focus-inner,
  [type='button']::-moz-focus-inner,
  [type='reset']::-moz-focus-inner,
  [type='submit']::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }

  /**
 * Restore the focus styles unset by the previous rule.
 */

  button:-moz-focusring,
  [type='button']:-moz-focusring,
  [type='reset']:-moz-focusring,
  [type='submit']:-moz-focusring {
    outline: 1px dotted ButtonText;
  }

  /**
 * Correct the padding in Firefox.
 */

  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }

  /**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

  legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }

  /**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

  progress {
    vertical-align: baseline;
  }

  /**
 * Remove the default vertical scrollbar in IE 10+.
 */

  textarea {
    overflow: auto;
  }

  /**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

  [type='checkbox'],
  [type='radio'] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }

  /**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

  [type='number']::-webkit-inner-spin-button,
  [type='number']::-webkit-outer-spin-button {
    height: auto;
  }

  /**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

  [type='search'] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }

  /**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

  [type='search']::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  /**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }

  /* Interactive
   ========================================================================== */

  /*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

  details {
    display: block;
  }

  /*
 * Add the correct display in all browsers.
 */

  summary {
    display: list-item;
  }

  /* Misc
   ========================================================================== */

  /**
 * Add the correct display in IE 10+.
 */

  template {
    display: none;
  }

  /**
 * Add the correct display in IE 10.
 */

  [hidden] {
    display: none;
  }
}

// Mixin that renders all of the core styles that are not theme / typography dependent.
@mixin labs-core($include-default-font-faces: true) {
  @include labs-normalize();

  @if $include-default-font-faces == true {
    @include labs-default-font-faces();
  }

  @include labs-material-icons();
  @include labs-mat-resets();

  html {
    box-sizing: border-box;
  }

  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }

  body {
    overflow-x: hidden;
    min-width: 320px;
  }
}

@mixin hide-scrollbar() {
  // https://blogs.msdn.microsoft.com/kurlak/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari/
  // There is a CSS rule that can hide scrollbars in Webkit-based browsers (Chrome and Safari).
  &::-webkit-scrollbar {
    display: none;
  }
  // There is a CSS rule that can hide scrollbars in IE 10+.
  -ms-overflow-style: none;
}

@mixin labs-mat-avatar-theme($theme) {
  $accent: map-get($theme, accent);
  $background: map-get($theme, background);

  labs-avatar {
    img {
      background: mat-color($background, card);
    }

    .status-indicator:after {
      background: mat-color($accent);
    }
  }
}

@mixin labs-mat-dashboard-theme($theme) {
  $foreground: map-get($theme, foreground);
  $gridster-background: none;
  $gridster-border: 1px solid mat-color($foreground, divider);

  labs-dashboard {
    gridster {
      background: $gridster-background;

      .gridster-column {
        border-left: $gridster-border;
        border-right: $gridster-border;
      }

      .gridster-row {
        border-top: $gridster-border;
        border-bottom: $gridster-border;
      }

      gridster-item {
        background: $gridster-background;
      }
    }
  }
}

@mixin labs-mat-footer-theme($theme) {
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  labs-footer > footer {
    background: mat-color($background, footer);
    color: mat-color($foreground, footer);
  }
}

@mixin labs-mat-footer-typography($config) {
  labs-footer > footer {
    @include mat-typography-level-to-styles($config, caption);
  }
}

@mixin labs-mat-header-bar-theme($theme) {
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  labs-header-bar {
    background: mat-color($background, header-bar);
    color: mat-color($foreground, header-bar);
  }
}

@mixin labs-mat-login-card-theme($theme) {
  $background: map-get($theme, background);

  labs-login-card {
    mat-card {
      background: mat-color($background, card, 0.95) !important;
    }
  }
}

@mixin labs-mat-status-badge-theme($theme) {
  $background: map-get($theme, background);

  labs-status-badge {
    background-color: mat-color($background, unselected-chip);
  }
}

@mixin _labs-mat-step-control-style($background, $foreground) {
  background: $background;
  color: $foreground;
  border-color: darken($background, 5);

  .step-control__arrow {
    fill: $background;

    &--outline {
      fill: darken($background, 10%);
    }
  }
}

@mixin labs-mat-stepper-theme($theme) {
  $primary: map-get($theme, primary);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  labs-stepper {
    .step-control {
      &--past {
        @include _labs-mat-step-control-style(
          mat-color($background, selected-button),
          mat-color($foreground, text)
        );
      }

      &--active {
        @include _labs-mat-step-control-style(
          mat-color($primary),
          mat-color($primary, default-contrast)
        );
      }

      &--future {
        @include _labs-mat-step-control-style(
          mat-color($background, unselected-chip),
          mat-color($foreground, disabled-button)
        );
      }
    }
  }
}

@mixin labs-mat-tree-theme($theme) {
  $foreground: map-get($theme, foreground);

  labs-tree {
    ul {
      .mat-tree-node {
        &:before {
          border: 1px solid mat-color($foreground, divider);
        }
      }

      & > *:last-child > li > .mat-tree-node,
      & > *:last-child > .mat-tree-node {
        &:after {
          border: 1px solid mat-color($foreground, divider);
        }
      }
    }
  }
}

@mixin labs-mat-elements-theme($theme) {
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);
  $primary: map-get($theme, primary);

  background-color: mat-color($background, background);
  color: mat-color($foreground, text);

  a {
    color: mat-color($primary);
  }
}

@mixin labs-mat-components-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);

  .mat-primary {
    .mat-tab-label-active {
      color: mat-color($primary);
    }
  }

  .mat-accent {
    .mat-tab-label-active {
      color: mat-color($accent);
    }
  }
}

@mixin labs-angular-material-theme($theme) {
  @include labs-mat-elements-theme($theme);
  @include labs-mat-components-theme($theme);
  @include labs-mat-avatar-theme($theme);
  @include labs-mat-dashboard-theme($theme);
  @include labs-mat-footer-theme($theme);
  @include labs-mat-header-bar-theme($theme);
  @include labs-mat-login-card-theme($theme);
  @include labs-mat-status-badge-theme($theme);
  @include labs-mat-stepper-theme($theme);
  @include labs-mat-tree-theme($theme);
}

@mixin labs-mat-theme(
  $light-theme: labs-mat-light-theme(),
  $dark-theme: labs-mat-dark-theme(),
  $selector: 'body'
) {
  #{$selector} {
    @include angular-material-theme($light-theme);
    @include labs-angular-material-theme($light-theme);

    @media (prefers-color-scheme: dark) {
      @include angular-material-theme($dark-theme);
      @include labs-angular-material-theme($dark-theme);
    }
  }
}

@mixin labs-mat-elements-typography($config) {
  // Default list
  .mat-list-base {
    .mat-list-item {
      font-size: mat-font-size($config, body-1);
      @include mat-line-base(mat-font-size($config, caption));
    }

    .mat-list-option {
      font-size: mat-font-size($config, body-1);
      @include mat-line-base(mat-font-size($config, caption));
    }
  }

  // Toolbar font sizes
  .mat-toolbar,
  .mat-toolbar h1,
  .mat-toolbar h2,
  .mat-toolbar h3,
  .mat-toolbar h4,
  .mat-toolbar h5,
  .mat-toolbar h6 {
    @include mat-typography-level-to-styles($config, body-1);
    margin: 0;
  }

  // Default card heading
  .mat-card-header .mat-card-title {
    font-size: mat-font-size($config, subheading-2);
    @include mat-line-base(mat-font-size($config, subheading-2));
  }
}

@mixin labs-mat-typography(
  $config: labs-typography-config(),
  $selector: 'body'
) {
  #{$selector} {
    @include mat-core($config);

    // custom components
    @include labs-mat-elements-typography($config);
    @include labs-mat-footer-typography($config);
  }

  @include mat-base-typography($config, $selector);
}

/// Mixin to manage responsive breakpoints
/// @param {String} $breakpoint - Breakpoint name
/// @param {Map} $breakpoints - Map of breakpoints
@mixin respond-to($breakpoint, $breakpoints: labs-breakpoints-config()) {
  // If the key exists in the map
  @if map-has-key($breakpoints, $breakpoint) {
    // Prints a media query based on the value
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  }

  // If the key doesn't exist in the map
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}