@mixin typescale-style(
  $type-scale,
  $font-family: var(--md-sys-typescale-#{$type-scale}-family),
  $font-size: var(--md-sys-typescale-#{$type-scale}-size),
  $line-height: var(--md-sys-typescale-#{$type-scale}-line-height),
  $letter-spacing: var(--md-sys-typescale-#{$type-scale}-letter-spacing),
  $font-variation-settings: var(--md-sys-typescale-#{$type-scale}-font-variation-settings)
) {
  font-family: $font-family;
  font-size: $font-size;
  line-height: $line-height;
  letter-spacing: $letter-spacing;
  font-variation-settings: $font-variation-settings;
}

@mixin typescale($name, $family, $size, $tracking, $line-height, $vf-weight) {
  --md-sys-typescale-#{$name}-family: #{$family};
  --md-sys-typescale-#{$name}-size: #{$size}rem;
  --md-sys-typescale-#{$name}-letter-spacing: #{$tracking}rem;
  --md-sys-typescale-#{$name}-line-height: #{$line-height}rem;
  --md-sys-typescale-#{$name}-font-variation-settings: "wght" #{$vf-weight};
}

@mixin material-symbols($name: "", $size: 24, $font-size: $size, $line-height: $size) {
  content: $name;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  direction: ltr;
  display: inline-block;
  font-family: "Material Symbols Outlined";
  font-feature-settings: "liga";
  font-size: #{$size}rem;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: #{$line-height}rem;
  text-rendering: optimizeLegibility;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
}

@mixin focus-ring($thickness: 2, $offset: $thickness, $z-index: 1) {
  @keyframes focus-ring {
    0% {
      outline: #{$thickness * 4}px solid var(--md-sys-color-primary);
    }

    100% {
      outline: #{$thickness}px solid var(--md-sys-color-primary);
    }
  }

  animation: focus-ring var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect) forwards;
  outline-offset: #{$offset}px;
  transition: background-color var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect),
    outline var(--md-sys-motion-spring-fast-spatial-standard-duration) var(--md-sys-motion-spring-fast-spatial-standard);
  z-index: $z-index;
}
