$border-values: (
  null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
    var(--#{$prefix}border-color-translucent),
  wide: $border-width-wide var(--#{$prefix}border-style)
    var(--#{$prefix}border-color-translucent),
  0: 0,
);

$utilities-border-colors: map-loop((
  "red": red,
  "green": green,
), rgba-css-var, "$key", "border") !default;

//Utilities
$utilities: (
  "object": (
    property: object-fit,
    class: object,
    values: (
      contain: contain,
      cover: cover,
      fill: fill,
      scale-down: scale-down,
      none: none,
    ),
  ),
  "cursor": (
    property: cursor,
    class: cursor,
    values: (
      auto: auto,
      pointer: pointer,
      move: move,
      not-allowed: not-allowed,
      zoom-in: zoom-in,
      zoom-out: zoom-out,
      default: default,
      none: none,
      help: help,
      progress: progress,
      wait: wait,
      text: text,
      v-text: vertical-text,
      grab: grab,
      grabbing: grabbing,
    ),
  ),
  "border": (
    property: border,
    values: $border-values,
  ),
  "border-top": (
    property: border-top,
    values: $border-values,
  ),
  "border-end": (
    class: border-end,
    property: border-right,
    values: $border-values,
  ),
  "border-bottom": (
    property: border-bottom,
    values: $border-values,
  ),
  "border-start": (
    class: border-start,
    property: border-left,
    values: $border-values,
  ),
  "border-x": (
    class: border-x,
    property: border-left border-right,
    values: $border-values,
  ),
  "border-y": (
    class: border-y,
    property: border-top border-bottom,
    values: $border-values,
  ),
  "width": (
    property: width,
    class: w,
    values: $size-values,
  ),
  "height": (
    property: height,
    class: h,
    values: $size-values,
  ),
  "columns": (
    property: columns,
    class: columns,
    responsive: true,
    values: 2 3 4,
  ),
) !default;
