.b{
  border: $default-border;
}
.b-0 {
  border: none;
}


.bx-0 {
  border-left-width: 0;
  border-right-width: 0;
}
.by-0 {
  border-top-width: 0;
  border-bottom-width: 0;
}

@each $name, $location in $locations {
  .b#{$name} {
    border-#{$location}:$default-border;
  }

  .b#{$name}-0 {
    border-#{$location}-width: 0;
  }
}

.bx {
  //border-left:  $default-border;
  //border-right:  $default-border;
  @extend .br;
  @extend .bl;
}
.by {
  @extend .bt;
  @extend .bb;
}

// Border radius

.r-full {
  border-radius: 50%;
}
.r-0 {
  border-radius: 0;
}
.r {
  border-radius: 0.25rem;
}

@each $breakpoint, $name in $breakpoints {
  $i: index($breakpoints, $breakpoint $name);
  .r-#{$breakpoint} {
    border-radius: 0.25rem * $i;
  }
  @each $corner, $corner-name in $corners {
    @each $side, $side-name in $sides {
      .r#{$corner}-#{$side}-#{$breakpoint} {
        border-#{$corner-name}-#{$side-name}-radius: 0.25rem * $i;
      }
      .r#{$corner}-#{$side}-0 {
        border-#{$corner-name}-#{$side-name}-radius: 0;
      }
    }
  }
}

@for $i from 2 through 12 {
  .r-#{$i} {
    border-radius: 0.25rem * $i;
  }
  @each $corner, $corner-name in $corners {
    .r#{$corner} {
      border-#{$corner-name}-left-radius: $default-border-radius;
      border-#{$corner-name}-right-radius: $default-border-radius;
    }
    .r#{$corner}-#{$i} {
      border-#{$corner-name}-left-radius: 0.25rem * $i;
      border-#{$corner-name}-right-radius: 0.25rem * $i;
    }

    @each $side, $side-name in $sides {
      .r#{$corner}-#{$side} {
        border-#{$corner-name}-#{$side-name}-radius: $default-border-radius;
      }

      .r#{$corner}-#{$side}-#{$i} {
        border-#{$corner-name}-#{$side-name}-radius: 0.25rem * $i;
      }
    }
  }
}


@for $i from 1 through 5{
  .b-w-#{$i},.hover\:b-w-#{$i}:hover{
    border-width: $i*1px;
  }
}