@use "../../variables/index" as *;

/**
 * Border Utility Classes
 *
 * Note: Uses $size-* tokens for border-radius and $component-border-color for colors.
 *
 * Intentionally hardcoded values:
 * - 1px border widths: Standard border width, not spacing
 * - 0 border radius: Reset, not a size on the token scale
 * - 50% and 9999px border radius: Shape ratios for circles and pills, which have to
 *   hold at any element size, so they cannot come from the fixed $size-* scale
 */

.border-all {
  border: 1px solid $component-border-color !important;
  border-radius: $size-4 !important;
}
.border-top {
  border-top: 1px solid $component-border-color !important;
}
.border-bottom {
  border-bottom: 1px solid $component-border-color !important;
}
.border-left {
  border-left: 1px solid $component-border-color !important;
}
.border-right {
  border-right: 1px solid $component-border-color !important;
}
.border-all {
  border: 1px solid $component-border-color !important;
  border-radius: $size-4 !important;
}

//media queries
@media (max-width: $screen-xs-max) {
  .border-all-xs {
    border: 1px solid $component-border-color !important;
    border-radius: $size-4 !important;
  }
  .border-top-xs {
    border-top: 1px solid $component-border-color !important;
  }
  .border-bottom-xs {
    border-bottom: 1px solid $component-border-color !important;
  }
  .border-left-xs {
    border-left: 1px solid $component-border-color !important;
  }
  .border-right-xs {
    border-right: 1px solid $component-border-color !important;
  }
  .border-all-xs {
    border: 1px solid $component-border-color !important;
    border-radius: $size-4 !important;
  }
}

@media (min-width: $screen-sm-min) {
  .border-all-sm {
    border: 1px solid $component-border-color !important;
    border-radius: $size-4 !important;
  }
  .border-top-sm {
    border-top: 1px solid $component-border-color !important;
  }
  .border-bottom-sm {
    border-bottom: 1px solid $component-border-color !important;
  }
  .border-left-sm {
    border-left: 1px solid $component-border-color !important;
  }
  .border-right-sm {
    border-right: 1px solid $component-border-color !important;
  }
  .border-all-sm {
    border: 1px solid $component-border-color !important;
    border-radius: $size-4 !important;
  }
}

@media (min-width: $screen-md-min) {
  .border-all-md {
    border: 1px solid $component-border-color !important;
    border-radius: $size-4 !important;
  }
  .border-top-md {
    border-top: 1px solid $component-border-color !important;
  }
  .border-bottom-md {
    border-bottom: 1px solid $component-border-color !important;
  }
  .border-left-md {
    border-left: 1px solid $component-border-color !important;
  }
  .border-right-md {
    border-right: 1px solid $component-border-color !important;
  }
  .border-all-md {
    border: 1px solid $component-border-color !important;
    border-radius: $size-4 !important;
  }
}

@media (min-width: $screen-lg-min) {
  .border-all-lg {
    border: 1px solid $component-border-color !important;
    border-radius: $size-4 !important;
  }
  .border-top-lg {
    border-top: 1px solid $component-border-color !important;
  }
  .border-bottom-lg {
    border-bottom: 1px solid $component-border-color !important;
  }
  .border-left-lg {
    border-left: 1px solid $component-border-color !important;
  }
  .border-right-lg {
    border-right: 1px solid $component-border-color !important;
  }
  .border-all-lg {
    border: 1px solid $component-border-color !important;
    border-radius: $size-4 !important;
  }
}

.borderless {
  border-color: transparent !important;
  box-shadow: none !important;
}


// border radius
//
// `.b-r-4` was never defined, in the SCSS layer or the LESS one before it, yet two ai-chat templates
// carried the class from a scale that only existed on paper. Defining it here would have given those
// two surfaces a radius they never had, so the dead class was removed from them in the same change.
// `.b-r-2` stays undefined: nothing uses it and nothing documents it.

.b-r-0 {
  border-radius: 0 !important;
}
.b-r-4 {
  border-radius: $size-4 !important;
}
.b-r-8 {
  border-radius: $size-8 !important;
}
.b-r-16 {
  border-radius: $size-16 !important;
}
.b-r-24 {
  border-radius: $size-24 !important;
}
.b-r-32 {
  border-radius: $size-32 !important;
}
.b-r-40 {
  border-radius: $size-40 !important;
}

.b-r-circle {
  border-radius: 50% !important;
}
.b-r-pill {
  border-radius: 9999px !important;
}