/* ========================================================================
   Component: utils.less
 ========================================================================== */
 
// 
// Utilities classes to simplify 
// components constructions
// ------------------------------

@margin-base: 10px;
@margin-sm:   5px;
@margin-lg:   15px;
@margin-xl:   30px;

@padding-xl:   30px;
@padding-lg:   15px;
@padding-base: 10px;
@padding-sm:   5px;

@text-alpha:            rgba(255,255,255,.5);
@text-alpha-inverse:    rgba(0,0,0,.5);

@text-sm:               @font-size-base * .85;
@text-md:               @font-size-base * 1.9;
@text-lg:               @font-size-base * 3;

@border-color:          rgba(0,0,0,.12);

@wd-xxs:                60px;
@wd-xs:                 90px;
@wd-sm:                 150px;
@wd-sd:                 200px; // sd == standard
@wd-md:                 240px;
@wd-lg:                 280px;
@wd-xl:                 320px;
@wd-xxl:                360px;
@wd-wide:               100%;
@wd-auto:               auto;
@wd-zero:               0;

// Margins
// --------------------

.m0 { margin: 0 !important; }
.ml0 { margin-left: 0 !important; }
.mr0 { margin-right: 0 !important; }
.mt0 { margin-top: 0 !important; }
.mb0 { margin-bottom: 0 !important; }

.m  { margin: @margin-base !important; }
.ml { margin-left: @margin-base !important; }
.mr { margin-right: @margin-base !important; }
.mt { margin-top: @margin-base !important; }
.mb { margin-bottom: @margin-base !important; }

.m-sm  { margin: @margin-sm !important; }
.ml-sm { margin-left: @margin-sm !important; }
.mr-sm { margin-right: @margin-sm !important; }
.mt-sm { margin-top: @margin-sm !important; }
.mb-sm { margin-bottom: @margin-sm !important; }

.m-lg  { margin: @margin-lg !important; }
.ml-lg { margin-left: @margin-lg !important; }
.mr-lg { margin-right: @margin-lg !important; }
.mt-lg { margin-top: @margin-lg !important; }
.mb-lg { margin-bottom: @margin-lg !important; }

.m-xl  { margin: @margin-xl !important; }
.ml-xl { margin-left: @margin-xl !important; }
.mr-xl { margin-right: @margin-xl !important; }
.mt-xl { margin-top: @margin-xl !important; }
.mb-xl { margin-bottom: @margin-xl !important; }

// Margin vertical / horizontal
.mv { .mt; .mb; }
.mh { .ml; .mr; }

.mv-lg { .mt-lg; .mb-lg; }
.mh-lg { .ml-lg; .mr-lg; }

.mv-sm { .mt-sm; .mb-sm; }
.mh-sm { .ml-sm; .mr-sm; }

// Paddings
// --------------------

.p0 { padding: 0 !important; }
.pl0 { padding-left: 0 !important; }
.pr0 { padding-right: 0 !important; }
.pt0 { padding-top: 0 !important; }
.pb0 { padding-bottom: 0 !important; }
.pv0 { .pt0; .pb0; }
.ph0 { .pl0; .pr0; }

.p  { padding: @padding-base !important; }
.pl { padding-left: @padding-base !important; }
.pr { padding-right: @padding-base !important; }
.pt { padding-top: @padding-base !important; }
.pb { padding-bottom: @padding-base !important; }

.p-sm  { padding: @padding-sm !important; }
.pl-sm { padding-left: @padding-sm !important; }
.pr-sm { padding-right: @padding-sm !important; }
.pt-sm { padding-top: @padding-sm !important; }
.pb-sm { padding-bottom: @padding-sm !important; }

.p-lg  { padding: @padding-lg !important; }
.pl-lg { padding-left: @padding-lg !important; }
.pr-lg { padding-right: @padding-lg !important; }
.pt-lg { padding-top: @padding-lg !important; }
.pb-lg { padding-bottom: @padding-lg !important; }

.p-xl  { padding: @padding-xl !important; }
.pl-xl { padding-left: @padding-xl !important; }
.pr-xl { padding-right: @padding-xl !important; }
.pt-xl { padding-top: @padding-xl !important; }
.pb-xl { padding-bottom: @padding-xl !important; }


// Padding vertical / horizontal
.pv { .pt; .pb; }
.ph { .pl; .pr; }

.pv-xl { .pt-xl; .pb-xl; }
.ph-xl { .pl-xl; .pr-xl; }

.pv-lg { .pt-lg; .pb-lg; }
.ph-lg { .pl-lg; .pr-lg; }

.pv-sm { .pt-sm; .pb-sm; }
.ph-sm { .pl-sm; .pr-sm; }


// Border
// --------------------

.b0 { border-width: 0 !important; }
.bl0 { border-left-width: 0 !important; }
.br0 { border-right-width: 0 !important; }
.bt0 { border-top-width: 0 !important; }
.bb0 { border-bottom-width: 0 !important; }

.br { border-right: 1px solid @border-color;}
.bl { border-left: 1px solid @border-color;}
.bt { border-top: 1px solid @border-color;}
.bb { border-bottom: 1px solid @border-color;}
.b, .ba  { .br;.bl;.bt;.bb; } // all borders

// Border Radius Clear

.radius-clear {
  border-radius: 0 !important;
}

// Box Shadow Clear

.shadow-clear {
  box-shadow: 0 0 0 #000 !important;
}

// Text helpers

.text-white         { color: #fff; }
.text-inverse       { color: @brand-inverse; }
.text-alpha         { color: @text-alpha; }
.text-pink          { color: @brand-pink; }
.text-purple        { color: @brand-purple; }
.text-dark          { color: @brand-dark; }
.text-alpha-inverse { color: @text-alpha-inverse; }
.text-green         { color: @brand-green; }
.text-yellow        { color: @brand-yellow; }
.text-gray-darker   { color: @gray-darker; }
.text-gray-dark     { color: @gray-dark; }
.text-gray          { color: @gray; }
.text-gray-light    { color: @gray-light; }
.text-gray-lighter  { color: @gray-lighter; }
.text-inherit       { color: inherit; }
// Text sizing

.text-sm { font-size: @text-sm; }
.text-md { font-size: @text-md; }
.text-lg { font-size: @text-lg; }

// Text others

.text-nowrap { white-space: nowrap; }
.text-thin   { font-weight: 100 !important; }
.text-normal { font-weight: normal !important; }
.text-bold   { font-weight: bold !important; }

.inline { display: inline-block !important; }
.block-center { margin: 0 auto; }

// Background helpers
//  Generates classes for
//    .brand
//    .brand-light
//    .brand-dark

.bg-primary      { .bgcolor-variant('brand-primary'); }
.bg-success      { .bgcolor-variant('brand-success'); }
.bg-info         { .bgcolor-variant('brand-info'); }
.bg-warning      { .bgcolor-variant('brand-warning'); }
.bg-danger       { .bgcolor-variant('brand-danger'); }
.bg-green        { .bgcolor-variant('brand-green'); }
.bg-pink         { .bgcolor-variant('brand-pink'); }
.bg-purple       { .bgcolor-variant('brand-purple'); }
.bg-inverse      { .bgcolor-variant('brand-inverse'); }
.bg-yellow       { .bgcolor-variant('brand-yellow'); }

.bg-white        { .make-bg(#fff, inherit); }
.bg-gray-darker  { .make-bg(@gray-darker); }
.bg-gray-dark    { .make-bg(@gray-dark); }
.bg-gray         { .make-bg(@gray, @text-color); }
.bg-gray-light   { .make-bg(@gray-light, @text-color); }
.bg-gray-lighter { .make-bg(@gray-lighter, @text-color); }

.bg-transparent  { background-color: transparent !important; }

.bgcolor-variant(@bgcolor, @text-color: #fff) {
  @amountOfLight: 10%;
  & {
    background-color: @@bgcolor;
    color: @text-color !important;
  }
  &-light {
    @col: ~"@{bgcolor}-light";
    background-color: @@col;
    color: @text-color !important;
  }
  &-dark {
    @col: ~"@{bgcolor}-dark";
    background-color: @@col;
    color: @text-color !important;
  }
  small {
    color: inherit;
  }
}

.make-bg(@bgcolor, @text-color: #fff) {
  background-color: @bgcolor;
  color: @text-color !important;
}

.bg-cover {
  background-size: cover;
}

// Common thumbnail sizes (ideal for images)

.thumb8   { .thumnbail-size; }
.thumb16  { .thumnbail-size(16px); }
.thumb24  { .thumnbail-size(24px); }
.thumb32  { .thumnbail-size(32px); }
.thumb48  { .thumnbail-size(48px); }
.thumb64  { .thumnbail-size(64px); }
.thumb80  { .thumnbail-size(80px); }
.thumb96  { .thumnbail-size(96px); }
.thumb128 { .thumnbail-size(128px); }

.thumnbail-size(@sz: 8px) {
  width: @sz !important;
  height: @sz !important;
}

// Vertical align helpers

.align-middle {
  vertical-align: middle;
}
.align-top {
  vertical-align: top;
}
.align-bottom {
  vertical-align: bottom;
}


// Background image
.bg-center {
  background-position: center center;
  background-size: cover;
}

// List
.list-icon {
  em {
    font-size: 14px;
    width: 40px;
    vertical-align: middle;
    margin: 0;
    display: inline-block;
    text-align: center;
    .transition(all .2s);
    line-height: 30px;
  }
  div:hover em {
    .scale(3, 3)
  }
}

// Components size

.wd-xxs  { width: @wd-xxs;  }
.wd-xs   { width: @wd-xs;   }
.wd-sm   { width: @wd-sm;   }
.wd-sd   { width: @wd-sd;   }
.wd-md   { width: @wd-md;   }
.wd-lg   { width: @wd-lg;   }
.wd-xl   { width: @wd-xl;   }
.wd-xxl  { width: @wd-xxl;  }
.wd-wide { width: @wd-wide; }
.wd-auto { width: @wd-auto; }
.wd-zero { width: @wd-zero; }

// Extra labels

.label-inverse {
  .label-variant(@brand-inverse);
}

.label-green {
  .label-variant(@brand-green);
}

.label-pink {
  .label-variant(@brand-pink);
}

.label-purple {
  .label-variant(@brand-purple);
}


// Extra alert

.alert-purple {
  .alert-variant(@brand-purple; @brand-purple; #fff);
}
.alert-green {
  .alert-variant(@brand-green; @brand-green; #fff);
}
.alert-pink {
  .alert-variant(@brand-pink; @brand-pink; #fff);
}
.alert-inverse {
  .alert-variant(@brand-inverse; @brand-inverse; #fff);
}

// Simulate clickable element
.clickable {
  cursor: pointer;
}

// Absolute center element
// ----------------------------------- 

.abs-center-container {
  position: relative;
}
.abs-center {
  // width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  
  &.abs-fixed {
    position: fixed;
    z-index: 999;
  }
  
  &.abs-right {
    left: auto; right: 20px;
    text-align: right;
  }

  &.abs-left {
    right: auto; left: 20px;
    text-align: left;
  }
}

@media (max-height: 720px) {
  .abs-center {
    position: relative;
  }
}


.link-unstyled {
  text-decoration: none !important;
  outline: none !important;
}

.no-resize {
  resize: none;
  max-width: 100%;
  min-width: 100%;
}

/** 
 * Displays hidden content on hover. Add this class to the parent element.
 * Markup
 *   <div class="hover-visible">
 *    <div class="hover-hidden"></div>
 *   </div>
 */

.hover-visible {

  .hover-hidden {
    display: none;
  }

  &:hover .hover-hidden {
    display: block;
    &-inline {
      display: inline-block;
    }
  }
}

//
// MEDIA BOX CLASSIC
// 
// since BS 3.3.x it doesn't support fullwidth form-controls so we use 
// a copy to make possible the use of the classic component
// ----------------------------------- 


// Media objects
// Source: http://stubbornella.org/content/?p=497
// --------------------------------------------------


// Common styles
// -------------------------

// Clear the floats
.media-box,
.media-box-body {
  overflow: hidden;
  zoom: 1;
}

// Proper spacing between instances of .media-box
.media-box,
.media-box .media-box {
  margin-top: 15px;
}
.media-box:first-child {
  margin-top: 0;
}

// For images and videos, set to block
.media-box-object {
  display: block;
}

// Reset margins on headings for tighter default spacing
.media-box-heading {
  margin: 0 0 5px;
}


// Media image alignment
// -------------------------

.media-box {
  > .pull-left {
    margin-right: 10px;
  }
  > .pull-right {
    margin-left: 10px;
  }
}


// Media list variation
// -------------------------

// Undo default ul/ol styles
.media-box-list {
  padding-left: 0;
  list-style: none;
}