// ============================================
// Utility Classes
// ============================================

@use "variables" as *;

// Text Transform
.jbs-text-capitalize {
  text-transform: capitalize !important;
}

.jbs-text-uppercase {
  text-transform: uppercase !important;
}

.jbs-text-lowercase {
  text-transform: lowercase !important;
}

// Text Alignment
.jbs-text-center {
  text-align: center;
}

.jbs-text-start {
  text-align: left !important;
}

.jbs-text-end {
  text-align: right !important;
}

@media (min-width: 768px) {
  .jbs-text-md-center {
    text-align: center !important;
  }
}

// Text Colors
.jbs-text-white {
  color: $text-white !important;
}

.jbs-text-dark {
  color: $text-dark !important;
}

.jbs-text-muted {
  color: $secondary-color !important;
}

.jbs-text-reset {
  --bs-text-opacity: 1;
  color: inherit !important;
}

// Text Size
.jbs-text-lgt {
  font-size: 1.25rem !important;
  line-height: 1.5rem !important;
}

.jbs-text-sm {
  font-size: $font-size-sm !important;
}

.jbs-text-md {
  font-size: $font-size-base !important;
}

.jbs-text-lg {
  font-size: $font-size-lg !important;
}

.jbs-text-xl {
  font-size: $font-size-xl !important;
}

.jbs-fs-1 {
  font-size: calc(1.375rem + 1.5vw) !important;
}

// Font Weight
.jbs-fw-normal {
  font-weight: 400 !important;
}

.jbs-fw-500 {
  font-weight: 500 !important;
}

.jbs-fw-600 {
  font-weight: 600 !important;
}

.jbs-fw-700 {
  font-weight: 700 !important;
}

.jbs-fw-bold {
  font-weight: bold !important;
}

// Opacity
.jbs-opacity-50 {
  opacity: 0.5 !important;
}

// List Styles
.jbs-list-unstyled {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

// Column Spacing (Custom)
.jbs-colum-space-6 {
  width: 50%;
}

.jbs-colum-space-4 {
  flex: 1;
  width: calc(100% / 3);
  box-sizing: border-box;
}

.jbs-bg-white {
  background-color: $text-white !important;
}

// ============================================
// Alerts
// ============================================

.jbs-alert {
  display: flex;
  align-items: center;
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  i {
    margin-right: 0.5rem;
  }
}

.jbs-alert-success {
  background-color: #d1e7dd;
  color: #0f5132;
}

.jbs-alert-danger {
  background-color: #f8d7da;
  color: #842029;
}

.jbs-alert-warning {
    background-color: #fff3cd;
    color: #664d03;
}

.jbs-alert-info {
    background-color: #cff4fc;
    color: #055160;
}



.jbs-alert-dismissible {
  padding-right: 3rem;

  .jbs-btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1.25rem 1rem;
  }
}


// Overflow
.jbs-overflow-hidden {
  overflow: hidden !important;
}

// Fade Utility with Smooth Animation
.jbs-fade {
  transition: opacity 0.15s linear;

  &:not(.jbs-show) {
    opacity: 0;
  }

  &.jbs-show {
    opacity: 1;
  }
}

.jbs-show {
  display: block !important;
}

// cursor pointer
.jbs-pointer {
  cursor: pointer !important;
}

// spinner 
.jbs-spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -.125em;
    border: .25em solid var(--jbs-brand_color_2);
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: .75s linear infinite jbs-spinner-border;
    animation: .75s linear infinite jbs-spinner-border;
}

.jbs-spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: .2em;
}

@-webkit-keyframes jbs-spinner-border {
    to {
        transform: rotate(360deg)
    }
}

@keyframes jbs-spinner-border {
    to {
        transform: rotate(360deg)
    }
}