圆角

@each $key, $value in $radii {
  $root-tokens: map.set($root-tokens, --radius-#{$key}, $value);
}
// stylelint-disable-next-line scss/dollar-variable-default
$root-tokens: map.set($root-tokens, --radius-pill, 50rem);

$radius: .5rem;
$radii: ();
// stylelint-disable-next-line scss/dollar-variable-default
$radii: defaults(
  (
    0: 0,
    1: $radius * .25,
    2: $radius * .375,
    3: $radius * .5,
    4: $radius * .75,
    5: $radius,
    6: $radius * 1.25,
    7: $radius * 1.5,
    8: $radius * 1.75,
    9: $radius * 2,
  ),
  $radii
);

@mixin border-radius($radius: var(--radius-5), $fallback-border-radius: false) {
  @if $enable-rounded {
    border-radius: valid-radius($radius);
  }
  @else if $fallback-border-radius != false {
    border-radius: $fallback-border-radius;
  }
}

@mixin border-top-radius($radius: var(--radius-5)) {
  @if $enable-rounded {
    border-start-start-radius: valid-radius($radius);
    border-start-end-radius: valid-radius($radius);
  }
}

@mixin border-end-radius($radius: var(--radius-5)) {
  @if $enable-rounded {
    border-start-end-radius: valid-radius($radius);
    border-end-end-radius: valid-radius($radius);
  }
}

@mixin border-bottom-radius($radius: var(--radius-5)) {
  @if $enable-rounded {
    border-end-start-radius: valid-radius($radius);
    border-end-end-radius: valid-radius($radius);
  }
}

@mixin border-start-radius($radius: var(--radius-5)) {
  @if $enable-rounded {
    border-start-start-radius: valid-radius($radius);
    border-end-start-radius: valid-radius($radius);
  }
}

@mixin border-top-start-radius($radius: var(--radius-5)) {
  @if $enable-rounded {
    border-start-start-radius: valid-radius($radius);
  }
}

@mixin border-top-end-radius($radius: var(--radius-5)) {
  @if $enable-rounded {
    border-start-end-radius: valid-radius($radius);
  }
}

@mixin border-bottom-end-radius($radius: var(--radius-5)) {
  @if $enable-rounded {
    border-end-end-radius: valid-radius($radius);
  }
}

@mixin border-bottom-start-radius($radius: var(--radius-5)) {
  @if $enable-rounded {
    border-end-start-radius: valid-radius($radius);
  }
}

"border-radius": (
  property: (
    "--rounded-size": null,
    "border-radius": var(--rounded-size)
  ),
  class: rounded,
  values: map.merge(
    $radii,
    (
      null: map.get($radii, 5),
      circle: 50%,
      pill: var(--radius-pill)
    )
  )
),
"rounded-size": (
  property: --rounded-size,
  class: rounded-size,
  values: map.merge(
    $radii,
    (
      null: map.get($radii, 5),
      circle: 50%,
      pill: var(--radius-pill)
    )
  )
),
"rounded-top": (
  property: border-start-start-radius border-start-end-radius,
  class: rounded-top,
  values: map.merge(
    $radii,
    (
      null: var(--rounded-size, var(--radius-5)),
      circle: 50%,
      pill: var(--radius-pill)
    )
  )
),
"rounded-end": (
  property: border-start-end-radius border-end-end-radius,
  class: rounded-end,
  values: map.merge(
    $radii,
    (
      null: var(--rounded-size, var(--radius-5)),
      circle: 50%,
      pill: var(--radius-pill)
    )
  )
),
"rounded-bottom": (
  property: border-end-start-radius border-end-end-radius,
  class: rounded-bottom,
  values: map.merge(
    $radii,
    (
      null: var(--rounded-size, var(--radius-5)),
      circle: 50%,
      pill: var(--radius-pill)
    )
  )
),
"rounded-start": (
  property: border-start-start-radius border-end-start-radius,
  class: rounded-start,
  values: map.merge(
    $radii,
    (
      null: var(--rounded-size, var(--radius-5)),
      circle: 50%,
      pill: var(--radius-pill)
    )
  )
),