@import "material-symbols";

// @font-face {
//   font-family: "Material Icons";
//   font-style: normal;
//   font-weight: 400;
//   font-display: block;
//   src: $icon-font-url;
//   //src: url(https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp) //format('woff2');
// }

// .material-icons {
//   font-family: "Material Icons";
//   font-weight: normal;
//   font-style: normal;
//   font-size: 24px;
//   line-height: 1;
//   letter-spacing: normal;
//   text-transform: none;
//   display: inline-block;
//   white-space: nowrap;
//   word-wrap: normal;
//   direction: ltr;
//   -webkit-font-feature-settings: "liga";
//   -webkit-font-smoothing: antialiased;
// }

.material-icons {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased; // Support for all WebKit browsers
  -moz-osx-font-smoothing: grayscale; // Support for Firefox
  text-rendering: optimizeLegibility; // Support for Safari and Chrome
  font-feature-settings: "liga"; // Support for IE
}


//*
//* Icons
//*
// todo: das funktioniert nur wenn wir light/dark theme mittels klasse auf dem body setzen 
.light .mat-icon {
  --mat-icon-grade: 0;
}
// todo: das funktioniert nur wenn wir light/dark theme mittels klasse auf dem body setzen 
.dark .mat-icon {
  --mat-icon-grade: -25;
}

.mat-icon {
  --mat-icon-size: 24;
  --mat-icon-fill: 1;
  --mat-icon-weight: 400;
  --mat-icon-grade: 0;
  --mat-icon-optical-size: var(--mat-icon-size);

  display: inline-block;
  width: auto !important;
  height: auto !important;
  line-height: 1;
  font-size: calc(var(--mat-icon-size) * 1px) !important;
  font-variation-settings: 'FILL' var(--mat-icon-fill), 'wght' var(--mat-icon-weight), 'GRAD' var(--mat-icon-grade), 'opsz' var(--mat-icon-optical-size) !important;
  
  &[svgIcon],
  &[data-mat-icon-type="svg"] {
    width: calc(var(--mat-icon-size) * 1px)!important;
    height: calc(var(--mat-icon-size) * 1px)!important;
  }

  &.fill-1 {
    --mat-icon-fill: 1;
  }

  &.fill-0 {
    --mat-icon-fill: 0;
  }

  &.emphasis-low {
    --mat-icon-grade: -25;
  }

  &.emphasis-normal {
    --mat-icon-grade: 0;
  }

  &.emphasis-high {
    --mat-icon-grade: 200;
  }

  //? only for non-mat-icons
  &.s-16,
  &.icon-16 {
    --mat-icon-size: 16;
  }

  //? mat-icon legacy
  &.s-18,
  &.icon-18 {
    --mat-icon-size: 18;
  }

  &.s-20 {
    --mat-icon-size: 20;
  }

  &.s-24 {
    --mat-icon-size: 24;
  }

  //? for non-mat-icons
  &.s-32,
  &.icon-32 {
    --mat-icon-size: 32;
  }

  &.s-40 {
    --mat-icon-size: 40;
  }

  &.s-48 {
    --mat-icon-size: 48;
  }
}


//? legacy
// .mat-icon.icon-16 {
//   width: 16px !important;
//   height: 16px !important;
// }

// .icon-18 {
//   width: 18px !important;
//   height: 18px !important;
//   font-size: 18px !important;
// }

// .icon-32 {
//   width: 32px !important;
//   height: 32px !important;
// }