@import "../config/index.scss";

$borders: (
  'Right': right,
  'Left': left,
  'Bottom': bottom,
  'Top': top
);

$border-style: 1px solid $cu-divider--light;

.u-border {
  border: $border-style;
}

.u-borderNone {
  border: 0;
}

@each $name, $value in $borders {
  .u-border#{$name} {
    border-#{$value}: $border-style;
  }
  .u-border#{$name}None {
    border-#{$value}: 0;
  }
}

@if $responsive == true {

  @each $bp-name, $bp-value in $breakpoints {

    @media (min-width: $bp-value) {

      .u-#{$bp-name}-border {
        border: $border-style;
      }

      .u-#{$bp-name}-borderNone {
        border: 0;
      }

      @each $name, $value in $borders {

        .u-#{$bp-name}-border#{$name} {
          border-#{$value}: $border-style;
        }

        .u-#{$bp-name}-border#{$name}None {
          border-#{$value}: 0;
        }

      }
    }
  }
}

// Border Radius

$border-radius: (
  'None': 0,
  'Sm': $border-radius-small,  // 2px
  'Md': $border-radius-medium, // 4px
  'Lg': $border-radius-large   // 8px
);

@each $name, $value in $border-radius {
  .u-borderRadius#{$name} {
    border-radius: $value !important;
  }
}

@if $responsive == true {
  @each $bp-name, $bp-value in $breakpoints {
    @media (min-width: $bp-value) {
      @each $name, $value in $border-radius {
        .u-#{$bp-name}-borderRadius#{$name} {
          border-radius: $value !important;
        }
      }
    }
  }
}

// Border Color

$border-color: (
  'Default': $cu-divider,
  'Light': $cu-divider--light,
  'Primary': $cu-primary,
  'Highlight': $cu-highlight,
  'Positive' : $cu-positive,
  'Negative' : $cu-negative
);

@each $name, $value in $border-color {
  .u-borderColor#{$name} {
    border-color: $value !important;
  }
}