.ba-1px { border: 1px solid; }
.bt-1px { border-top: 1px solid; }
.br-1px { border-right: 1px solid; }
.bb-1px { border-bottom: 1px solid; }
.bl-1px { border-left: 1px solid; }

.ba-0 { border: none; }
.bt-0 { border-top: none; }
.br-0 { border-right: none; }
.bb-0 { border-bottom: none; }
.bl-0 { border-left: none; }

@each $breakpoint in $breakpoints {
  $bp: nth($breakpoint, 1);
  $letters: nth($breakpoint, 2);

  @media #{$bp} {
    .ba-1px-#{$letters} { border: 1px solid; }
    .bt-1px-#{$letters} { border-top: 1px solid; }
    .br-1px-#{$letters} { border-right: 1px solid; }
    .bb-1px-#{$letters} { border-bottom: 1px solid; }
    .bl-1px-#{$letters} { border-left: 1px solid; }

    .ba-0-#{$letters} { border: none; }
    .bt-0-#{$letters} { border-top: none; }
    .br-0-#{$letters} { border-right: none; }
    .bb-0-#{$letters} { border-bottom: none; }
    .bl-0-#{$letters} { border-left: none; }
  }
}

$radiusCorners: (
  tl top-left-radius,
  tr top-right-radius,
  bl bottom-left-radius,
  br bottom-right-radius,
);

@each $radius in $pixelSizes {
  .radius#{$radius} { border-radius: #{$radius}px; }

  @each $radiusCorner in $radiusCorners {
    $dir: nth($radiusCorner, 1);
    $postfix: nth($radiusCorner, 2);

    .radius#{$radius}-#{$dir} { border-#{$postfix}: #{$radius}px; }
  }
}

@each $breakpoint in $breakpoints {
  $bp: nth($breakpoint, 1);
  $letters: nth($breakpoint, 2);

  @each $radius in $pixelSizes {
    @media #{$bp} {
      .radius#{$radius}-#{$letters} { border-radius: #{$radius}px; }

      @each $radiusCorner in $radiusCorners {
        $dir: nth($radiusCorner, 1);
        $postfix: nth($radiusCorner, 2);

        .radius#{$radius}-#{$dir}-#{$letters} { border-#{$postfix}: #{$radius}px; }
      }
    }
  }
}