$borderColors: ();
$borderColors: map-merge(
        (
            "white" : 'white',
            "gray-100" : 'gray-100',
            "gray-200" : 'gray-200',
            "gray-300" : 'gray-300',
            "gray-400" : 'gray-400',
            "primary" : 'primary',
            "secondary" : 'secondary',
            "warning" : 'warning',
            "danger" : 'danger',
            "success" : 'success',
            "orange" : 'orange',
            "dark" : 'dark',
        ),
        $borderColors
);

@each $position in ('', '-top', '-bottom', '-left', '-right') {

    .border#{$position}-0 {
        border#{$position}: 0 !important;
    }

    @each $name, $color in $borderColors {
        .border#{$position}-#{$name} {
            border#{$position}: 1px solid var(--#{$color});

            @if ($position == '-left') {
                .rtl & {
                    border-left: none !important;
                    border-right: 1px solid var(--#{$color});
                }
            } @else if ($position == '-right') {
                .rtl & {
                    border-right: none !important;
                    border-left: 1px solid var(--#{$color});
                }
            }
        }

        .border-color-#{$name} {
            border-color: var(--#{$color});
        }
    }
}

.border-solid {
    border-style: solid;
}

.border-0 {
    border: 0 !important;
}

.border-bottom-0 {
    border-bottom: 0 !important;
}

.border-2 {
    border-width: 2px !important;
}

.border-3 {
    border-width: 3px !important;
}

.border-4 {
    border-width: 4px !important;
}

.border-white {
    border: 1px solid var(--white);
}

.border-dashed {
    border-width: 1px;
    border-style: dashed;
}

.border-gray-4 {
    border: 4px solid var(--gray-300);
}

@media (min-width: $screen-sm-max) {

    .border-right-gray-300-lg {
        border-right: 1px solid var(--gray-300);
    }

}