@import "../roots/color-map";

// Border width classes
.border {
  @for $i from 1 through 5 {
    &-#{$i} {
      border-width: #{$i}px;
    }
  }
}

// Border color classes using the color-variations map from color-map.scss
@each $name, $color in $color-variations {
  .b-#{$name} {
    border-color: #{$color} !important;
  }
}

// Border radius classes for all sides
.b-rad {
  @for $i from 1 through 100 {
    @if $i < 10 {
      &-0#{$i} {
        border-radius: #{$i}px;
      }
    } @else {
      &-#{$i} {
        border-radius: #{$i}px;
      }
    }
  }
}

// Border radius classes for specific corners and combinations
.b-rad {
  @each $corner in (lt, tl, rt, tr, lb, bl, rb, br) {
    @for $i from 1 through 100 {
      @if $i < 10 {
        &-#{$corner}-0#{$i} {
          border-radius: 0; // Reset all first
          @if $corner == lt or $corner == tl {
            border-top-left-radius: #{$i}px;
          } @else if $corner == rt or $corner == tr {
            border-top-right-radius: #{$i}px;
          } @else if $corner == lb or $corner == bl {
            border-bottom-left-radius: #{$i}px;
          } @else if $corner == rb or $corner == br {
            border-bottom-right-radius: #{$i}px;
          }
        }
      } @else {
        &-#{$corner}-#{$i} {
          border-radius: 0; // Reset all first
          @if $corner == lt or $corner == tl {
            border-top-left-radius: #{$i}px;
          } @else if $corner == rt or $corner == tr {
            border-top-right-radius: #{$i}px;
          } @else if $corner == lb or $corner == bl {
            border-bottom-left-radius: #{$i}px;
          } @else if $corner == rb or $corner == br {
            border-bottom-right-radius: #{$i}px;
          }
        }
      }
    }
  }
}

// Border side classes with width and style combinations
.b {
  // Define styles to loop through
  $styles: (
    solid: solid,
    dashed: dashed,
    dotted: dotted,
    double: double,
    none: none,
  );

  // Single sides
  @each $side in (t, b, l, r) {
    @for $i from 1 through 5 {
      @each $style-name, $style-value in $styles {
        &-#{$side}-#{$i}-#{$style-name} {
          @if $side == t {
            border-top: #{$i}px #{$style-value};
            border-left: none;
            border-right: none;
            border-bottom: none;
          } @else if $side == b {
            border-bottom: #{$i}px #{$style-value};
            border-left: none;
            border-right: none;
            border-top: none;
          } @else if $side == l {
            border-left: #{$i}px #{$style-value};
            border-top: none;
            border-right: none;
            border-bottom: none;
          } @else if $side == r {
            border-right: #{$i}px #{$style-value};
            border-left: none;
            border-top: none;
            border-bottom: none;
          }
        }
      }
    }
  }

  // Two-side combinations
  @each $side in (tb, lr, tl, tr, bl, br) {
    @for $i from 1 through 5 {
      @each $style-name, $style-value in $styles {
        &-#{$side}-#{$i}-#{$style-name} {
          border: none; // Reset all sides first
          @if $side == tb {
            border-top: #{$i}px #{$style-value};
            border-bottom: #{$i}px #{$style-value};
          } @else if $side == lr {
            border-left: #{$i}px #{$style-value};
            border-right: #{$i}px #{$style-value};
          } @else if $side == tl {
            border-top: #{$i}px #{$style-value};
            border-left: #{$i}px #{$style-value};
          } @else if $side == tr {
            border-top: #{$i}px #{$style-value};
            border-right: #{$i}px #{$style-value};
          } @else if $side == bl {
            border-bottom: #{$i}px #{$style-value};
            border-left: #{$i}px #{$style-value};
          } @else if $side == br {
            border-bottom: #{$i}px #{$style-value};
            border-right: #{$i}px #{$style-value};
          }
        }
      }
    }
  }

  // Three-side combinations
  @each $side in (tbl, tbr, tlr, blr) {
    @for $i from 1 through 5 {
      @each $style-name, $style-value in $styles {
        &-#{$side}-#{$i}-#{$style-name} {
          border: none; // Reset all sides first
          @if $side == tbl {
            border-top: #{$i}px #{$style-value};
            border-bottom: #{$i}px #{$style-value};
            border-left: #{$i}px #{$style-value};
          } @else if $side == tbr {
            border-top: #{$i}px #{$style-value};
            border-bottom: #{$i}px #{$style-value};
            border-right: #{$i}px #{$style-value};
          } @else if $side == tlr {
            border-top: #{$i}px #{$style-value};
            border-left: #{$i}px #{$style-value};
            border-right: #{$i}px #{$style-value};
          } @else if $side == blr {
            border-bottom: #{$i}px #{$style-value};
            border-left: #{$i}px #{$style-value};
            border-right: #{$i}px #{$style-value};
          }
        }
      }
    }
  }

  // All sides
  @for $i from 1 through 5 {
    @each $style-name, $style-value in $styles {
      &-tblr-#{$i}-#{$style-name} {
        border: #{$i}px #{$style-value};
      }
    }
  }
}

// Usage examples:
/*
<div class="b-t-1-solid b-Red-100 b-rad-tl-01">Red solid top border 1px with 1px top-left radius</div>
<div class="b-lr-2-dashed b-Blue-500 b-rad-lt-10">Blue dashed left-right border 2px with 10px top-left radius</div>
<div class="b-tbl-3-solid b-Green-300 b-rad-lt-10">Green solid top-bottom-left border 3px with 10px top-left radius</div>
<div class="b-tblr-4-solid b-Purple-700 b-rad-br-25">Purple solid all sides border 4px with 25px bottom-right radius</div>
*/

// DEFAULT CLASSES
// Border opacity
.border-opacity-50,
.b-o-50 {
  border-color: rgba(0, 0, 0, 0.5);
}
.border-opacity-25 {
  border-color: rgba(0, 0, 0, 0.25);
}
.border-opacity-10 {
  border-color: rgba(0, 0, 0, 0.1);
}

.bordered-all {
  border: 1px solid #{$gray};
  border-radius: 5px;
  padding: 5px;
}

.bordered {
  border: 1px solid transparent; // Placeholder border, visible when color is added
}

.bordered-thick {
  border: 2px solid #{$gray};
}

.bordered-thin {
  border: 0.5px solid #{$gray};
}

.bordered-round {
  border: 1px solid #{$gray};
  border-radius: 4px;
}

.bordered-circle {
  min-width: 2rem;
  max-width: 10rem;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #{$gray};
  border-radius: 50%;
}

.border-abs-centered {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  border: 1px solid #ccc;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  & > * {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 5px;
  }
}
.asp-1,
.aspect-ratio-1 {
  aspect-ratio: 1;
}

.bordered-dashed {
  border: 1px dashed #{$gray};
}

.bordered-dotted {
  border: 1px dotted #{$gray};
}

.bordered-shadow {
  border: 1px solid #{$gray};
  box-shadow: 0 2px 4px rgba($black, 0.1);
}

code {
  padding: 1px 0.5rem;
  border-radius: 0.2rem;
  background-color: #ccc;
  text-wrap: nowrap;
}