// Bootstrap utility extensions. Imported just before utilities/api so variable changes take effect.

// CSS Grid (Bootstrap 5): disable legacy grid classes and enable native CSS Grid.
$enable-grid-classes: false;
$enable-cssgrid: true;

// Extend the $utilities map with additional classes.
$utilities: map-merge(
  $utilities,
  (
    // Individual border widths per side.
    "border-top": (
      property: border-top-width,
      class: border-top,
      values: $border-widths
    ),
    "border-end": (
      property: border-right-width,
      class: border-end,
      values: $border-widths
    ),
    "border-bottom": (
      property: border-bottom-width,
      class: border-bottom,
      values: $border-widths
    ),
    "border-start": (
      property: border-left-width,
      class: border-start,
      values: $border-widths
    ),
    // Individual corner radii.
    "rounded-top-start": (
      property: border-top-left-radius,
      class: rounded-top-start,
      values: (
        null: var(--#{$prefix}border-radius),
        0: 0,
        1: var(--#{$prefix}border-radius-sm),
        2: var(--#{$prefix}border-radius),
        3: var(--#{$prefix}border-radius-lg),
        4: var(--#{$prefix}border-radius-xl),
        5: var(--#{$prefix}border-radius-xxl),
        circle: 50%,
        pill: var(--#{$prefix}border-radius-pill)
      )
    ),
    "rounded-top-end": (
      property: border-top-right-radius,
      class: rounded-top-end,
      values: (
        null: var(--#{$prefix}border-radius),
        0: 0,
        1: var(--#{$prefix}border-radius-sm),
        2: var(--#{$prefix}border-radius),
        3: var(--#{$prefix}border-radius-lg),
        4: var(--#{$prefix}border-radius-xl),
        5: var(--#{$prefix}border-radius-xxl),
        circle: 50%,
        pill: var(--#{$prefix}border-radius-pill)
      )
    ),
    "rounded-bottom-start": (
      property: border-bottom-left-radius,
      class: rounded-bottom-start,
      values: (
        null: var(--#{$prefix}border-radius),
        0: 0,
        1: var(--#{$prefix}border-radius-sm),
        2: var(--#{$prefix}border-radius),
        3: var(--#{$prefix}border-radius-lg),
        4: var(--#{$prefix}border-radius-xl),
        5: var(--#{$prefix}border-radius-xxl),
        circle: 50%,
        pill: var(--#{$prefix}border-radius-pill)
      )
    ),
    "rounded-bottom-end": (
      property: border-bottom-right-radius,
      class: rounded-bottom-end,
      values: (
        null: var(--#{$prefix}border-radius),
        0: 0,
        1: var(--#{$prefix}border-radius-sm),
        2: var(--#{$prefix}border-radius),
        3: var(--#{$prefix}border-radius-lg),
        4: var(--#{$prefix}border-radius-xl),
        5: var(--#{$prefix}border-radius-xxl),
        circle: 50%,
        pill: var(--#{$prefix}border-radius-pill)
      )
    ),
    // Opacity: add missing values (0 for bg/border/text; 10 for text) not in Bootstrap defaults.
    "bg-opacity": map-merge(
      map-get($utilities, "bg-opacity"),
      (values: map-merge(map-get(map-get($utilities, "bg-opacity"), "values"), (0: 0)))
    ),
    "border-opacity": map-merge(
      map-get($utilities, "border-opacity"),
      (values: map-merge(map-get(map-get($utilities, "border-opacity"), "values"), (0: 0)))
    ),
    "text-opacity": map-merge(
      map-get($utilities, "text-opacity"),
      (values: map-merge(map-get(map-get($utilities, "text-opacity"), "values"), (0: 0, 10: .1)))
    ),
  )
);