$border-utilities: (
  "width":
    map-collect(
      map-deep-get($system-properties, border-width, standard),
      map-deep-get($system-properties, border-width, extended)
    ),
  "style":
    map-collect(
      map-deep-get($system-properties, border-style, standard),
      map-deep-get($system-properties, border-style, extended)
    ),
);

@mixin border-n($side, $value...) {
  $important: null;
  @if has-important($value) {
    $value: remove($value, "!important");
    $important: " !important";
  }
  $has-style: false;
  $widths: map-get($border-utilities, "width");

  @each $this-value in $value {
    $match: false;
    @if map-has-key($all-color-shortcodes, smart-quote($this-value)) {
      $match: true;
      $this-value: smart-quote($this-value);
      @if $side == n {
        border-color: color($this-value) #{$important};
      } @else if $side == x {
        border-left-color: color($this-value) #{$important};
        border-right-color: color($this-value) #{$important};
      } @else if $side == y {
        border-bottom-color: color($this-value) #{$important};
        border-top-color: color($this-value) #{$important};
      } @else {
        border-#{$side}-color: color($this-value) #{$important};
      }
    } @else if type-of($this-value) == "number" {
      $converted-value: number-to-token($this-value);
      @if map-has-key($widths, $converted-value) {
        $match: true;
        $final-value: map-get($widths, $converted-value);
        @if $side == n {
          border-width: unquote("#{$final-value}#{$important}");
        } @else if $side == x {
          border-left-width: unquote("#{$final-value}#{$important}");
          border-right-width: unquote("#{$final-value}#{$important}");
        } @else if $side == y {
          border-bottom-width: unquote("#{$final-value}#{$important}");
          border-top-width: unquote("#{$final-value}#{$important}");
        } @else {
          border-#{$side}-width: unquote("#{$final-value}#{$important}");
        }
      } @else {
        @error '#{$this-value} is not a valid border width. Accepted values: #{map-keys($widths)}';
      }
    } @else if map-has-key($widths, smart-quote($this-value)) {
      $match: true;
      $this-value: smart-quote($this-value);
      $final-value: map-get($widths, $this-value);
      @if $side == n {
        border-width: unquote("#{$final-value}#{$important}");
      } @else if $side == x {
        border-left-width: unquote("#{$final-value}#{$important}");
        border-right-width: unquote("#{$final-value}#{$important}");
      } @else if $side == y {
        border-bottom-width: unquote("#{$final-value}#{$important}");
        border-top-width: unquote("#{$final-value}#{$important}");
      } @else {
        border-#{$side}-width: unquote("#{$final-value}#{$important}");
      }
    } @else {
      $converted-value: smart-quote($this-value);
      $styles: map-get($border-utilities, "style");
      @if map-has-key($styles, $converted-value) {
        $match: true;
        $has-style: true;
        $final-value: map-get($styles, $converted-value);
        @if $side == n {
          border-style: unquote("#{$final-value}#{$important}");
        } @else if $side == x {
          border-left-style: unquote("#{$final-value}#{$important}");
          border-right-style: unquote("#{$final-value}#{$important}");
        } @else if $side == y {
          border-bottom-style: unquote("#{$final-value}#{$important}");
          border-top-style: unquote("#{$final-value}#{$important}");
        } @else {
          border-#{$side}-style: unquote("#{$final-value}#{$important}");
        }
      } @else {
        @error '`#{$this-value}` is not a valid `border` token. '
          + 'Use valid color, units, and border-style tokens '
          + 'separated by commas.';
      }
    }
    @if not $match {
      @error '`#{$this-value}` is not a valid `border` token.';
    }
  }
  @if not $has-style {
    @if $side == n {
      border-style: solid#{$important};
    } @else if $side == x {
      border-left-style: solid#{$important};
      border-right-style: solid#{$important};
    } @else if $side == y {
      border-bottom-style: solid#{$important};
      border-top-style: solid#{$important};
    } @else {
      border-#{$side}-style: solid#{$important};
    }
  }
}

@mixin u-border($value...) {
  @include border-n(n, $value...);
}

@mixin u-border-x($value...) {
  @include border-n(x, $value...);
}

@mixin u-border-y($value...) {
  @include border-n(y, $value...);
}

@mixin u-border-top($value...) {
  @include border-n(top, $value...);
}

@mixin u-border-right($value...) {
  @include border-n(right, $value...);
}

@mixin u-border-bottom($value...) {
  @include border-n(bottom, $value...);
}

@mixin u-border-left($value...) {
  @include border-n(left, $value...);
}