<script setup>
import { computed } from "#imports";
const props = defineProps({
  vertical: {
    type: String,
    default: "sm"
  }
});
const classObject = computed(() => {
  return {
    [`responsive-rule`]: true,
    [`responsive-rule-${props.vertical}`]: props.vertical,
    "align-middle": true
  };
});
</script>

<template>
 <b-span :class="classObject" />
</template>

<style>
.responsive-rule {
  display: inline-block;
  border-top: var(--bs-border-width) solid;
  align-self: stretch;
  width: 100%;
  opacity: 0.25;
  padding: 0;
}

.breakpoint-gte-sm .responsive-rule-sm {
  display: inline-block;
  align-self: stretch;
  width: var(--bs-border-width);
  min-height: 1em;
  opacity: 0.25;
  height: 1em;
  border-left: var(--bs-border-width) solid;
  border-top: none;
  height: auto;
  padding: 0;
  margin-left: var(--bs-border-width);
}

.breakpoint-gte-md .responsive-rule-md {
  display: inline-block;
  align-self: stretch;
  width: var(--bs-border-width);
  min-height: 1em;
  opacity: 0.25;
  background-color: currentcolor;
}

.breakpoint-gte-lg .responsive-rule-lg {
  display: inline-block;
  align-self: stretch;
  width: var(--bs-border-width);
  min-height: 1em;
  opacity: 0.25;
  background-color: currentcolor;
}

.breakpoint-gte-xl .responsive-rule-xl {
  display: inline-block;
  align-self: stretch;
  width: var(--bs-border-width);
  min-height: 1em;
  opacity: 0.25;
  background-color: currentcolor;
}

.breakpoint-gte-xxl .responsive-rule-xxl {
  display: inline-block;
  align-self: stretch;
  width: var(--bs-border-width);
  min-height: 1em;
  opacity: 0.25;
  background-color: currentcolor;
}
</style>
