//$size: 24px !default;

@mixin theme() {
  .x-icon {
    background-repeat: no-repeat;
    display: inline-block;
    fill: currentColor;
    aspect-ratio: 1;
    //height: $size;
    //width: $size;

    font-size: 1.5em;

    // In some cases the icon elements may extend beyond the container. Clip these cases
    // in order to avoid weird overflows and click areas.
    overflow: hidden;

    &.x-icon-inline {
      font-size: inherit;
      height: inherit;
      line-height: inherit;
      width: inherit;
    }

    &.x-ligature-font[fontIcon]::before {
      content: attr(fontIcon);
    }
  }
}

@mixin default-icons() {
  @font-face {
    font-family: 'Material Symbols';
    font-style: normal;
    font-weight: 100 700;
    src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v188/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzaqkNCeE.woff2)
      format('woff2');
  }

  .material-symbols {
    font-family: 'Material Symbols';
    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;
  }

  .filled {
    @extend .material-symbols;
    font-variation-settings: 'FILL' 1;

    &::before {
      content: attr(fontIcon);
    }
  }
}