/* stylelint-disable */
@use "~@fontsource/ibm-plex-sans/scss/mixins" as IBM;

$material-symbols-font-path: '~material-symbols/';

$local-font: true;

@mixin setFont() {
  @if $local-font {

    // IBM Plex Sans
    @include IBM.faces(
      $subsets: all,
      $weights: (
        200,
        300,
        400,
        500,
        600,
        700,
      ),
      $styles: all
    );

    // Material Symbols Outlined
    @font-face {
      font-family: "Material Symbols Outlined";
      font-style: normal;
      font-display: swap;
      src: url("#{$material-symbols-font-path}material-symbols-outlined.woff2") format("woff2");
    }

    // This is a fallback for old buttons relying on Material Icons
    @font-face {
      font-family: "Material Icons";
      font-style: normal;
      font-display: swap;
      src: url("#{$material-symbols-font-path}material-symbols-outlined.woff2") format("woff2");
    }
  } @else {
    // IBM Plex Sans
    @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;300;400;500;600;700&display=swap");

    // Material Symbols Outlined
    @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,0,0");
  }
}

@include setFont();

.material-icons,
.material-symbols-outlined {
  display: inline-block;
  font-family: "Material Symbols Outlined", sans-serif;
  font-size: 24px;  /* Preferred icon size */
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  font-style: normal;
  font-weight: 300;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  vertical-align: middle;
  direction: ltr;
}