@use '@angular/material' as mat;
@import "@angular/material/theming";

// Define a custom typography config that overrides the font-family as well as the
// `headlines` and `body-1` levels.
$custom-typography: mat.define-typography-config(
  $font-family: "IBM Plex Sans",
  $display-4: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
  $display-3: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
  $display-2: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
  $display-1: mat.define-typography-level(34px, 40px, 400),
  $headline: mat.define-typography-level(24px, 32px, 400),
  $title: mat.define-typography-level(20px, 32px, 500),
  $subheading-2: mat.define-typography-level(16px, 28px, 500, $letter-spacing: 0),
  $subheading-1: mat.define-typography-level(14px, 24px, 500, $letter-spacing: 0.16px),
  $body-2: mat.define-typography-level(16px, 24px, 400, $letter-spacing: 0),
  $body-1: mat.define-typography-level(14px, 20px, 400, $letter-spacing: 0.16px),
  $caption: mat.define-typography-level(12px, 20px, 400, $letter-spacing: 0.045em),
  $button: mat.define-typography-level(14px, 14px, 500, $letter-spacing: 1.25px, $font-family: "IBM Plex Sans Condensed"), 
  $input: mat.define-typography-level(inherit, 1.15, 400) 
);
//$input: mat.define-typography-level(inherit, 1.125, 400)
//! letter-spacing for "button" doesn't work (right now defined in _sc-mat-overrides.scss)

//*
//* Fonts
//*

$font-prefix: "~@ibm/plex";


//* IBM Plex Sans Light (300) — Latin 

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  src: local('IBM Plex Sans Light'),
    local('IBMPlexSans-Light'),
    url('#{$font-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Latin1.woff2') format('woff2');
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}


//* IBM Plex Sans Regular (400) — Latin 

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: local('IBM Plex Sans'),
    local('IBMPlexSans'),
    url('#{$font-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Regular-Latin1.woff2') format('woff2');
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}


//* IBM Plex Sans Medium (500) — Latin 

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  src: local('IBM Plex Sans Medium'),
    local('IBMPlexSans-Medium'),
    url('#{$font-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Medium-Latin1.woff2') format('woff2');
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}


//* IBM Plex Sans Italic Regular (400) — Latin 

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  src: local('IBM Plex Sans Italic'),
    local('IBMPlexSans-Italic'),
    url('#{$font-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Italic-Latin1.woff2') format('woff2');
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

//* IBM Plex Sans Italic Medium (500) — Latin 

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 500;
  src: local('IBM Plex Sans Medium Italic'),
    local('IBMPlexSans-MediumItalic'),
    url('#{$font-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-MediumItalic-Latin1.woff2') format('woff2');
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}


//* IBM Plex Sans Condensed Light (300) — Latin 

@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('IBM Plex Sans Condensed Light'),
    local('IBMPlexSansCondensed-Light'),
    url('#{$font-prefix}/IBM-Plex-Sans-Condensed/fonts/split/woff2/IBMPlexSansCondensed-Light-Latin1.woff2') format('woff2');
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}


//* IBM Plex Sans Condensed Regular (400) — Latin 

@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('IBM Plex Sans Condensed'),
    local('IBMPlexSansCondensed'),
    url('#{$font-prefix}/IBM-Plex-Sans-Condensed/fonts/split/woff2/IBMPlexSansCondensed-Regular-Latin1.woff2') format('woff2');
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}


//* IBM Plex Sans Condensed Medium (500) — Latin 

@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 500;
  src: local('IBM Plex Sans Condensed Medium'),
    local('IBMPlexSansCondensed-Medium'),
    url('#{$font-prefix}/IBM-Plex-Sans-Condensed/fonts/split/woff2/IBMPlexSansCondensed-Medium-Latin1.woff2') format('woff2');
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

//* IBM Plex Mono Regular (400) — Latin 

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  src: local('IBM Plex Mono'),
    local('IBMPlexMono'),
    url('#{$font-prefix}/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Regular-Latin1.woff2') format('woff2');
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

//* IBM Plex Mono Medium (500) — Latin 

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  src: local('IBM Plex Mono Medium'),
    local('IBMPlexMono-Medium'),
    url('#{$font-prefix}/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Medium-Latin1.woff2') format('woff2');
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}


//*
//* Basic Typography
//*

b, strong, .strong {
  font-weight: 500;
}

em, .italic {
  font-style: italic;
}

.hyphens-auto {
  hyphens: auto;
}

//*
//* WYSIWYG Editor (quill)
//*

// $wysiwyg-list-indent-width: 16px;

// .ql-indent {
//   &-1 {
//     margin-left: $wysiwyg-list-indent-width;
//   }

//   &-2 {
//     margin-left: calc(2 * #{$wysiwyg-list-indent-width});
//   }

//   &-3 {
//     margin-left: calc(3 * #{$wysiwyg-list-indent-width});
//   }

//   &-4 {
//     margin-left: calc(4 * #{$wysiwyg-list-indent-width});
//   }

//   &-5 {
//     margin-left: calc(5 * #{$wysiwyg-list-indent-width});
//   }

//   &-6 {
//     margin-left: calc(6 * #{$wysiwyg-list-indent-width});
//   }
// }