// Border helper classes
// Use case: anywhere you want to have a custom border

// border directtion + general
[class*="bo-"], [class*="bo_"] {
  --border-color: var(--color);
  border-style: var(--border-style, solid); 
  border-color: var(--border-color, var(--color-main-5));
}

// Individual setting size
$border-sizes: "px", "xs", "s";
$border-directions: ( top : t, right : r, bottom : b, left : l ); 

@each $size in $border-sizes {
  .bo_#{$size} {
    --border-width: var(--space-#{$size});
    border-width: var(--border-width)
  }
  @each $direction, $letter in $border-directions {
    .bo-#{$letter}_#{$size} {
      --border-#{$direction}-width: var(--space-#{$size});
      border-#{$direction}-width: var(--border-#{$direction}-width) }
  }
}

// Reset, over-rule borders
.bo-no { border: none !important }