/* Bootstrap 5 bridge classes */

/*
 * These variables used to bridge the gap between Bootstrap 4 and Bootstrap 5 for
 * alert and list-group-item.
 */

// Reduces the background color intensity by 80%. This is the definition in BS5.
$alert-bg-scale: -80% !default;
// Reduces the border color intensity by 70%. This is the definition in BS5.
$alert-border-scale: -70% !default;
// Increases the text color intensity by 50%. This is the definition in BS5.
$alert-color-scale: 50% !default;

/*
 * These function used to bridge the gap between Bootstrap 4 and Bootstrap 5 and
 * and will be located in __functions.scss in Bootstrap 5
 * This file should be removed as part of MDL-75669.
 */

// Tint a color: mix a color with white based on the provided weight.
@function tint-color($color, $weight) {
    @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black.
// This function darkens a given color with black based on the provided weight.
@function shade-color($color, $weight) {
    @return mix(black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it.
@function shift-color($color, $weight) {
    @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

/* These classes are used to bridge the gap between Bootstrap 4 and Bootstrap 5. */
/* This file should be removed as part of MDL-75669. */
.g-0 {
    @extend .no-gutters;
}

.btn-close {
    @extend .close;
}

// Generate all spacer classes for all breakpoints for directions start and end.
// ps-1 > pl-1, pe-1 > pr-1, me-sm-1 > ml-sm-1, ...
@each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    @each $prop, $abbrev in (margin: m, padding: p) {
        @each $size, $length in $spacers {
            .#{$abbrev}s#{$infix}-#{$size} {
                @extend .#{$abbrev}l#{$infix}-#{$size};
            }
            .#{$abbrev}e#{$infix}-#{$size} {
                @extend .#{$abbrev}r#{$infix}-#{$size};
            }
        }
    }
}

// Generate all margin auto classes for all breakpoints for directions start and end.
// ps-auto > pl-auto, pe-auto > pr-auto, me-sm-auto > ml-sm-auto, ...
@each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    .ms#{$infix}-auto {
        @extend .ml#{$infix}-auto;
    }
    .me#{$infix}-auto {
        @extend .mr#{$infix}-auto;
    }
}

// Generate all float classes for all breakpoints for directions start and end.
// float-start > float-left, float-sm-end > float-sm-right, ...
@each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    .float#{$infix}-start {
        @extend .float#{$infix}-left;
    }
    .float#{$infix}-end {
        @extend .float#{$infix}-right;
    }
}

// Generate all text classes for all breakpoints for directions start and end.
// text-start > text-left, text-sm-end > text-sm-right, ...
@each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    .text#{$infix}-start {
        @extend .text#{$infix}-left;
    }
    .text#{$infix}-end {
        @extend .text#{$infix}-right;
    }
}

.border-start {
    @extend .border-left;
}
.border-end {
    @extend .border-right;
}
.border-start-0 {
    @extend .border-left-0;
}
.border-end-0 {
    @extend .border-right-0;
}
.rounded-start {
    @extend .rounded-left;
}
.rounded-end {
    @extend .rounded-right;
}