/***********************************/
/**            UTILS              **/
/***********************************/

// Util Components
// ----------------------------

.transition-height{
  @include transition(height .15s ease-in-out);
}

@include thumb('.thumb-lg', 60px);
@include thumb('.thumb', 48px);
@include thumb('.thumb-sm', 34px);
@include thumb('.thumb-xs', 28px);

.thumb-xs,
.thumb-sm,
.thumb-lg,
.thumb{
  position: relative;
  display: inline-block;
  text-align: center;

  img{
    height: auto;
    max-width: 100%;
    vertical-align: middle;
  }

  .status{
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    border: 0.15em solid $white;
    border-radius: 50%;

    &.status-bottom{
      top: auto;
      left: auto;
      bottom: 0;
      right: 0;
    }
  }
}

.text-ellipsis {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thin-scroll{
  &::-webkit-scrollbar {
    height: 8px;
    width: 8px;
  }
  &::-webkit-scrollbar:hover {
    background-color: #e9e9e9;
    border: none;
  }
  &::-webkit-scrollbar-thumb {
    border: none;
    background-color: rgba(0, 0, 0, .2);
    @include box-shadow(inset 1px 1px 0 rgba(0, 0, 0, .1));
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: $gray-light;
  }
}

@include keyframes('bg-attention'){
  0%{
    background-color: lighten($brand-warning, 43%);
  }
  5%{
    background-color: lighten($brand-warning, 33%);
  }
  0%{
    background-color: rgba(0,0,0,0);
  }
};

.bg-attention{
  @include animation(bg-attention 10s);
}

/* .h* + .fw-bold */
$font-sizes: 54px, $font-size-h1, $font-size-h2, $font-size-h3, $font-size-h4, $font-size-h5, $font-size-h6;
$i: 0;
@each $font-size in $font-sizes{

  .value#{$i}{
    margin: 0;
    font-size: $font-size;
    font-weight: $font-weight-semi-bold;
  }
  $i: $i + 1 !global;
}

// Style Classes
// ----------------------------

.text-align-center {
  text-align: center;
}

.text-align-right {
  text-align: right;
}

.no-margin {
  margin: 0;
}

$margin-vertical-variants: (xlg: 40px, lg: $line-height-computed*3/2, md: $line-height-computed, sm: $line-height-computed/2, xs: $line-height-computed/4, 0: 0);
$margin-horizontal-variants: (lg: 20px, md: 15px, sm: 10px, xs: 5px, 0: 0);

@include property-variants('.mt', 'margin-top', $margin-vertical-variants);
@include property-variants('.mb', 'margin-bottom', $margin-vertical-variants);
@include property-variants('.ml', 'margin-left', $margin-horizontal-variants);
@include property-variants('.mr', 'margin-right', $margin-horizontal-variants);

.no-padding{
  padding: 0;
}

$display-variants: (inline: inline, inline-block: inline-block, block: block);

@include property-variants('.display', 'display', $display-variants);

$width-variants: (50: 50px, 100: 100px, 150: 150px, 200: 200px);

@include property-variants('.width', 'width', $width-variants);

$height-variants: (50: 50px, 100: 100px, 150: 150px, 200: 200px, 250: 250px);

@include property-variants('.height', 'height', $height-variants);
@include property-variants('.max-height', 'max-height', $height-variants);

$opacity-variants: (10: .1, 20: .2, 30: .3, 40: .4, 50: .5, 60: .6, 70: .7, 80: .8, 90: .9);

@include property-variants('.opacity', 'opacity', $opacity-variants);

$z-index-variants: (more: 1, less: -1);

@include property-variants('.z-index', 'z-index', $z-index-variants);

.rounded {
  border-radius: 0.25rem;
}

.border {
  border: 1px solid #d2d2d2;
}

.no-border{
  border: none;
}

.bt{ border-top: 1px solid $gray-semi-lighter }
.br{ border-right: 1px solid $gray-semi-lighter }
.bb{ border-bottom: 1px solid $gray-semi-lighter }
.bl{ border-left: 1px solid $gray-semi-lighter }

.overflow-hidden{
  overflow: hidden;
}

.fw-semi-bold{
  font-weight: $font-weight-semi-bold;
}

.fw-normal{
  font-weight: $font-weight-normal;
}

.fw-bold{
  font-weight: $font-weight-bold;
}

.fw-thin{
  font-weight: $font-weight-thin;
}

.rotate-45 {
  @include rotate(45deg);
}

.rotate-135 {
  @include rotate(135deg);
}

.rotate-225 {
  @include rotate(225deg);
}

.rotate-315 {
  @include rotate(315deg);
}

// Text & Background Variations
// ----------------------------

//override bs .text-* classes so they use $brand-* variables

@include text-emphasis-variant('.text-primary', $brand-primary);

@include text-emphasis-variant('.text-success', $brand-success);

@include text-emphasis-variant('.text-info', $brand-info);

@include text-emphasis-variant('.text-warning', $brand-warning);

@include text-emphasis-variant('.text-danger', $brand-danger);

@include text-emphasis-variant('.text-link', $link-color);

//copy bg classes after bootstrap so it's possible to overload other bootstrap classes

@include bg-variant('.bg-primary', $brand-primary);
@include bg-variant('.bg-success', $brand-success);
@include bg-variant('.bg-info', $brand-info);
@include bg-variant('.bg-warning', $brand-warning);
@include bg-variant('.bg-danger', $brand-danger);

@include bg-variant('.bg-body', $body-bg);
@include bg-variant('.bg-gray', $gray);
@include bg-variant('.bg-gray-transparent', rgba($gray, .6));
@include bg-variant('.bg-gray-dark', $gray-dark);
@include bg-variant('.bg-black', $black);
@include bg-variant('.bg-gray-light', $gray-light);
@include bg-variant('.bg-gray-lighter', $gray-lighter);
@include bg-variant('.bg-transparent', rgba(0,0,0,0));
@include bg-variant('.bg-white', $white);

.bg-body, .bg-body-light, .bg-gray, .bg-gray-transparent, .bg-transparent,
.bg-primary, .bg-success, .bg-warning, .bg-danger, .bg-info{
  @include transition(background-color .15s ease-in-out);
}

@include text-emphasis-variant('.text-white', $white);
@include text-emphasis-variant('.text-gray', $gray);
@include text-emphasis-variant('.text-gray-dark', $gray-dark);
@include text-emphasis-variant('.text-gray-light', $gray-light);
@include text-emphasis-variant('.text-semi-muted', $gray-semi-light);
@include text-emphasis-variant('.text-gray-darker', $gray-darker);
@include text-emphasis-variant('.text-gray-lighter', $gray-lighter);


.text-light{
  opacity: .8;
}

.fs-mini{
  font-size: $font-size-mini;
}

.fs-sm{
  font-size: $font-size-small;
}

.fs-larger{
  font-size: $font-size-larger;
}

.btlr{
  border-top-left-radius: $border-radius-base;
}

.btrr{
  border-top-right-radius: $border-radius-base;
}

.bblr{
  border-bottom-left-radius: $border-radius-base;
}

.bbrr{
  border-bottom-right-radius: $border-radius-base;
}