// Pixel sizes
$border-px: 1;

// Radius
$border-radius: (
  square: 0,
  circle: 50%
);

@mixin border {
  @each $i in $border-px {
    .brdr-#{$i} {
      border: #{$i}px solid;
    }
    .brdr-top-#{$i} {
      border-top-width: #{$i}px;
      border-top-style: solid;
    }
    .brdr-bottom {
      border-bottom-width: #{$i}px;
      border-bottom-style: solid;
    }
  }
  @each $name, $value in $border-radius {
    .brdr-#{$name} {
      border-radius: #{$value};
    }
  }
  @include color-selectors(map_merge($colors, $colors-border), 'brdr-cl', 'border-color');
  @include color-selectors($colors-theme, 'brdr-cl-th', 'border-color');
  @include color-selectors($colors-background, 'brdr-cl-bg', 'border-color');
}

.brdr-none {
  border: none;
}

@include border;