// // borders.scss // Extended from Bootstrap //

// Responsive widths

@each $width, $widthValue in $container-max-widths {

@include media-breakpoint-up($width) {
  // Additive 
  .border-#{$width} {
    border: $border-width solid $border-color !important;
    color: rose;
  }
  .border-top-#{$width} {
    border-top: $border-width solid $border-color !important;
  }
  .border-right-#{$width} {
    border-right: $border-width solid $border-color !important;
  }
  .border-bottom-#{$width} {
    border-bottom: $border-width solid $border-color !important;
  }
  .border-left-#{$width} {
    border-left: $border-width solid $border-color !important;
  }
  // Substractive
  .border-#{$width}-0 {
    border: 0 !important;
  }
  .border-top-#{$width}-0 {
    border-top: 0 !important;
  }
  .border-right-#{$width}-0 {
    border-right: 0 !important;
  }
  .border-bottom-#{$width}-0 {
    border-bottom: 0 !important;
  }
  .border-left-#{$width}-0 {
    border-left: 0 !important;
  }
}

}

// Colors

.border-white-20 {

border-color: fade-out($white, .8) !important;

}

.border-gray-300 {

border-color: $gray-300 !important;

}

.border-gray-800 {

border-color: $gray-800 !important;

}

.border-gray-800-50 {

border-color: fade-out($gray-800, .5) !important;

}