Borders

--cx-border-width: var(--cx-border-width-medium);
--cx-border-style: solid;
--cx-border-color: var(--cx-border-main);
--cx-border-radius: var(--cx-border-radius-medium);

$border-width:                var(--border-width-medium);
$border-color:                var(--border-main);
$border-style:                solid;
$border-radius:               var(--border-radius-medium);

$border-width-zero:         $cx-border-width-context-zero;
$border-width-small:        $cx-border-width-context-small;
$border-width-medium:       $cx-border-width-context-medium;
$border-width-large:        $cx-border-width-context-large;
$border-width-xlarge:       $cx-border-width-context-xlarge;
$border-width-2xlarge:      $cx-border-width-context-2xlarge;

$border-radius-zero:        $cx-border-radius-context-zero;
$border-radius-xsmall:      $cx-border-radius-context-xsmall;
$border-radius-small:       $cx-border-radius-context-small;
$border-radius-medium:      $cx-border-radius-context-medium;
$border-radius-large:       $cx-border-radius-context-large;
$border-radius-xlarge:      $cx-border-radius-context-xlarge;
$border-radius-2xlarge:     $cx-border-radius-context-2xlarge;
$border-radius-3xlarge:     $cx-border-radius-context-3xlarge;
$border-radius-full:        $cx-border-radius-context-full;

$border-widths: (
  zero:         $border-width-zero,
  small:        $border-width-small,
  medium:       $border-width-medium,
  large:        $border-width-large,
  xlarge:       $border-width-xlarge,
  2xlarge:      $border-width-2xlarge,
);

$border-radii: (
  zero:         $border-radius-zero,
  xsmall:       $border-radius-xsmall,
  small:        $border-radius-small,
  medium:       $border-radius-medium,
  large:        $border-radius-large,
  xlarge:       $border-radius-xlarge,
  2xlarge:      $border-radius-2xlarge,
  3xlarge:      $border-radius-3xlarge,
  full:         $border-radius-full,
  circle:       50%,
);

$opacities: (
  "solid":                $opacity-solid,
  "95":                   $opacity-95,
  "90":                   $opacity-90,
  "80":                   $opacity-80,
  "70":                   $opacity-70,
  "60":                   $opacity-60,
  "50":                   $opacity-50,
  "40":                   $opacity-40,
  "30":                   $opacity-30,
  "20":                   $opacity-20,
  "10":                   $opacity-10,
  "05":                   $opacity-05,
  "zero":                 $opacity-zero,
);

$border-opacities: (
  "main": $opacity-border-main,
  "subtle": $opacity-border-subtle,
);

"border": (
  property: border,
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),
"border-top": (
  class: border-top,
  property: border-block-start,
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),
"border-end": (
  class: border-end,
  property: border-inline-end,
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),
"border-bottom": (
  class: border-bottom,
  property: border-block-end,
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),
"border-start": (
  class: border-start,
  property: border-inline-start,
  values: (
    null: var(--border-width) var(--border-style) var(--border-color),
    0: 0,
  )
),
"border-color": (
  property: (
    "border-color": var(--border-color),
    "--border-color": null
  ),
  class: null,
  group: true,
  // values: map-loop($context-colors, opacity-var, #{"$key"}, #{"border"})
  values: map-merge-multiple(
    map-rename-keys(map-loop($context-colors, opacity-var, #{"$key"}, #{"border"}), "border-", "start"),
    map-loop($context-border-colors, varify, #{"$key"}),
    map-loop($body-border-colors, varify, #{"$key"}),
    ( "border-reset": inherit )
  )
),
"border-width": (
  property: border-width,
  class: border,
  values: map-loop($border-widths, varify, "$key", "border-width")
),
"border-opacity": (
  property: --border-opacity,
  class: border-opacity,
  enabled: $enable-property-opacities,
  values: map-merge-multiple(
    map-loop($opacities, varify, "$key", "opacity"),
    map-loop($border-opacities, varify, "$key", "opacity-border")
  )
),

"rounded": (
  property: border-radius,
  class: rounded,
  values: map.merge(
    (
      null: var(--border-radius)
    ),
    map-loop($border-radii, varify, "$key", "border-radius")
  )
),
"rounded-top": (
  property: border-start-start-radius border-start-end-radius,
  class: rounded-top,
  values: map.merge(
    (
      null: var(--border-radius)
    ),
    map-loop($border-radii, varify, "$key", "border-radius")
  )
),
"rounded-end": (
  property: border-start-end-radius border-end-end-radius,
  class: rounded-end,
  values: map.merge(
    (
      null: var(--border-radius)
    ),
    map-loop($border-radii, varify, "$key", "border-radius")
  )
),
"rounded-bottom": (
  property: border-end-end-radius border-end-start-radius,
  class: rounded-bottom,
  values: map.merge(
    (
      null: var(--border-radius)
    ),
    map-loop($border-radii, varify, "$key", "border-radius")
  )
),
"rounded-start": (
  property: border-end-start-radius border-start-start-radius,
  class: rounded-start,
  values: map.merge(
    (
      null: var(--border-radius)
    ),
    map-loop($border-radii, varify, "$key", "border-radius")
  )
),