@use "sass:math";
@use "sass:string";

@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: outline var(--md-sys-motion-spring-fast-spatial-standard-duration)
    var(--md-sys-motion-spring-fast-spatial-standard);
  z-index: $z-index;
}

@function svg-enc($svg) {
  $svg: string-replace($svg, "#", "%23");
  $svg: string-replace($svg, "<", "%3C");
  $svg: string-replace($svg, ">", "%3E");
  $svg: string-replace($svg, '"', "'");
  @return "data:image/svg+xml," + $svg;
}

@function string-replace($string, $search, $replace: "") {
  $index: string.index($string, $search);
  @if $index {
    @return string.slice($string, 1, $index - 1) + $replace +
      string-replace(string.slice($string, $index + string.length($search)), $search, $replace);
  }
  @return $string;
}

@mixin g3-mask($r, $k: 0.72) {
  // 基础形状路径
  $offset: 100 * (1 - $k);
  $path: "M0,100 C0,#{$offset} #{$offset},0 100,0 L100,100 Z";

  // SVG 模板
  $svg-start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path transform="rotate(';
  $svg-end: ' 50 50)" fill="black" d="#{$path}"/></svg>';

  // 生成四个角的 Data URI
  $tl: url('#{svg-enc($svg-start + "0" + $svg-end)}');
  $tr: url('#{svg-enc($svg-start + "90" + $svg-end)}');
  $br: url('#{svg-enc($svg-start + "180" + $svg-end)}');
  $bl: url('#{svg-enc($svg-start + "270" + $svg-end)}');

  // 布局计算
  $fill: linear-gradient(#000, #000);
  $h-fill: calc(100% - 2 * #{$r} + 1px);
  $v-fill: calc(100% - 2 * #{$r} + 1px);

  mask-image: $tl, $tr, $br, $bl, $fill, $fill;
  mask-position: top left, top right, bottom right, bottom left, center center, center center;
  mask-repeat: no-repeat;
  mask-size: #{$r} #{$r}, #{$r} #{$r}, #{$r} #{$r}, #{$r} #{$r}, 100% $h-fill, $v-fill 100%;
}

// $radius:       圆角大小 (必填)
// $border-width: 边框宽度 (可选，默认 0)
// $border-color: 边框颜色 (可选)
// $bg-color:     背景颜色 (如果有边框，建议填此项以遮挡边框内部，默认白色)
// $k:            平滑度 (可选，默认 0.72)
@mixin g3-box($radius, $border-width: 0, $border-color: transparent, $bg-color: #fff, $k: 0.72) {
  @if $border-width == 0 {
    @include g3-mask($radius, $k);
  } @else {
    position: relative;

    background-color: transparent;

    z-index: 0;

    // 边框层
    &::before {
      @include g3-mask($radius, $k);
      content: "";

      position: absolute;

      background-color: $border-color;

      inset: 0;
      z-index: -2;
    }

    // 背景层
    &::after {
      $inner-r: calc(#{$radius} - #{$border-width});
      @include g3-mask($inner-r, $k);
      content: "";

      position: absolute;

      background-color: $bg-color;

      inset: $border-width;
      z-index: -1;
    }
  }
}
