.x-border-dashed {
  border-style: dashed !important;
}

.x-border-dotted {
  border-style: dotted !important;
}

.x-border-thick {
  border-width: thick !important;
}

.x-border-left-dotted {
  @extend .border-left;
  border-left-style: dotted !important;
}

.x-border-ver-dashed {
  @extend .border,
          .border-left-0,
          .border-right-0,
          .border-bottom-0,
          .x-border-dashed;
}

.x-border-ver-dotted {
  @extend .border,
          .border-left-0,
          .border-right-0,
          .border-bottom-0,
          .x-border-dotted;
  width: 10px;
  height: 1px;
  top: 50%;
}

.x-border-hr-dotted {
  @extend .border,
          .border-top-0,
          .border-right-0,
          .border-bottom-0,
          .x-border-dotted;
  bottom: 0;
  width: 1px;
}

.x-rounded-lg {
  border-radius: $border-radius-lg !important;
}


//
// Utilities for responsive `text-{color}` values
//

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    @each $color, $value in $theme-colors {
      .border#{$infix}-#{$color} {
        border-color: $value !important;
      }
    }
  }
}