@use "sass:map";
@use "utils";
@use "variables";

@function border-name($borderKey) {
  @if $borderKey != 0 {
    @return "-#{$borderKey}";
  } @else {
    @return null;
  }
}

@mixin borders($borders, $infix: "") {
  @each $borderKey, $borderColor in $borders {
    $borderColorName: border-name($borderKey);

    .fwe-b#{$infix}#{$borderColorName} {
      border: 1px solid $borderColor !important;
    }

    .fwe-bt#{$infix}#{$borderColorName} {
      border-top: 1px solid $borderColor !important;
    }

    .fwe-bb#{$infix}#{$borderColorName} {
      border-bottom: 1px solid $borderColor !important;
    }

    .fwe-bl#{$infix}#{$borderColorName} {
      border-left: 1px solid $borderColor !important;
    }

    .fwe-br#{$infix}#{$borderColorName} {
      border-right: 1px solid $borderColor !important;
    }

    .fwe-bx#{$infix}#{$borderColorName} {
      border-left: 1px solid $borderColor !important;
      border-right: 1px solid $borderColor !important;
    }

    .fwe-by#{$infix}#{$borderColorName} {
      border-top: 1px solid $borderColor !important;
      border-bottom: 1px solid $borderColor !important;
    }

    .fwe-b#{$infix}-none {
      border: none !important;
    }

    .fwe-bt#{$infix}-none {
      border-top: none !important;
    }

    .fwe-bb#{$infix}-none {
      border-bottom: none !important;
    }

    .fwe-bl#{$infix}-none {
      border-left: none !important;
    }

    .fwe-br#{$infix}-none {
      border-right: none !important;
    }

    .fwe-bx#{$infix}-none {
      border-left: none !important;
      border-right: none !important;
    }

    .fwe-by#{$infix}-none {
      border-top: none !important;
      border-bottom: none !important;
    }
  }
}

@each $breakpoint in map.keys(variables.$grid-breakpoints) {
  $infix: utils.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
  $size: map.get(variables.$grid-breakpoints, $breakpoint);

  @if $size == 0 {
    @include borders(variables.$borders);
  } @else {
    @media (min-width: $size) {
      @include borders(variables.$borders, $infix);
    }
  }
}
