@import '../../../../bootstrap/less/utilities';

//
// Utility classes
// --------------------------------------------------

// Imports
@import "utilities/align";
@import "utilities/display";
@import "utilities/elevation";
@import "utilities/flex";
@import "utilities/float";
@import "utilities/position";
@import "utilities/stretched-link";
@import "utilities/spacing";
@import "utilities/text";
@import "utilities/debug";
@import "utilities/overflow";
@import "utilities/animation";
@import "utilities/borders";


// Fade in/out with opacity and hide visiblity - for better performance.
.fade-in-visibility(@speed: 200ms) {
  visibility: visible;
  .opacity(1);
  .transition(~'opacity @{speed} ease, visibility 0s');
}
.fade-out-visibility(@speed: 200ms) {
  .invisible;
  .opacity(0);
  .transition(~'opacity @{speed} ease, visibility 0s @{speed}');
}


// Make an element fill the available (relative) space
.fill {
  .pos-abs;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

// Width utility classes used from BS4
.w-25 {
  width: 25% !important;
}
.w-50 {
  width: 50% !important;
}
.w-75 {
  width: 75% !important;
}
.w-100 {
  width: 100% !important;
}
.w-auto {
  width: auto !important;
}

// Height utility classes used from BS4
.h-25 {
  height: 25% !important;
}
.h-50 {
  height: 50% !important;
}
.h-75 {
  height: 75% !important;
}
.h-100 {
  height: 100% !important;
}
.h-auto {
  height: auto !important;
}

// Give an element rounded ends
.rounded-pill {
  border-radius: 5000px !important;
}

.clickable {
  cursor: pointer;
}

.mw-100 {
  max-width: 100%;
}

.mw-50 {
  max-width: 50%;
}

.border-radius-0 {
  border-radius: 0px;
}

.border-radius-1 {
  border-radius: 2px;
}

.border-radius-2 {
  border-radius: 5px;
}

.border-radius-3 {
  border-radius: 10px;
}

.border-radius-4 {
  border-radius: 20px;
}

.gap-0 {
  gap: 0px;
}

.gap-1 {
  gap: 2px;
}

.gap-2 {
  gap: 5px;
}

.gap-3 {
  gap: 10px;
}

.gap-4 {
  gap: 20px;
}

.font-weight-6 {
  font-weight: 600;
}

.cursor-pointer {
  cursor: pointer;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.border-left-primary {
  position: relative;
  padding-left: @spacer-4;

  &::before {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    height: 100%;
    width: @spacer-2;
    border-radius: 12px;
    background-color: @brand-primary;
  }
}

.affix-top-0 {
  .affix;
  top: 0;
}