//
// bootstrap-switch
// --------------------------------------------------

@import "../general/mixins.less";
@import "../general/variables.less";

/* ============================================================
 * bootstrapSwitch v1.8 by Larentis Mattia @SpiritualGuru
 * http://www.larentis.eu/
 *
 * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
 * http://www.bdmdesign.org/
 *
 * Project site:
 * http://www.larentis.eu/switch/
 * ============================================================
 * Licensed under the Apache License, Version 2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 * ============================================================ */

@bodyBackground: @white;
@textColor: @grayDark;

@linkColor: @mainColor;
@linkColorHover: darken(@mainColor, 15%);

@btnBackground: #fff;
@btnBackgroundHighlight: #fff;
@btnBorder: @grayLightBorder;

@btnPrimaryBackground: @mainColor;
@btnPrimaryBackgroundHighlight: @mainColor;

@btnInfoBackground: @cyan;
@btnInfoBackgroundHighlight: @cyan;

@btnSuccessBackground: @green;
@btnSuccessBackgroundHighlight: @green;

@btnWarningBackground: @orange;
@btnWarningBackgroundHighlight: @orange;

@btnDangerBackground: @red;
@btnDangerBackgroundHighlight: @red;

@btnInverseBackground: @mainColor;
@btnInverseBackgroundHighlight: @mainColor;


.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.border-top-left-radius(@radius) {
  -webkit-border-top-left-radius: @radius;
  -moz-border-radius-topleft: @radius;
  border-top-left-radius: @radius;
}

.border-bottom-left-radius(@radius) {
  -webkit-border-bottom-left-radius: @radius;
  -moz-border-radius-bottomleft: @radius;
  border-bottom-left-radius: @radius;
}

.border-left-radius(@radius) {
  .border-top-left-radius(@radius);
  .border-bottom-left-radius(@radius);
}

// Transitions
.transition(@transition) {
  -webkit-transition: @transition;
  -moz-transition: @transition;
  -o-transition: @transition;
  transition: @transition;
}

// Box sizing
.box-sizing(@boxmodel) {
  -webkit-box-sizing: @boxmodel;
  -moz-box-sizing: @boxmodel;
  box-sizing: @boxmodel;
}

// User select
// For selecting text on the page
.user-select(@select) {
  -webkit-user-select: @select;
  -moz-user-select: @select;
  -ms-user-select: @select;
  -o-user-select: @select;
  user-select: @select;
}

// Opacity
.opacity(@opacity) {
  opacity: @opacity / 100;
  filter: ~"alpha(opacity=@{opacity})";
}

// Gradient Bar Colors for buttons and alerts
.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
  color: @textColor;
  text-shadow: @textShadow;
  #gradient > .vertical(@primaryColor, @secondaryColor);
  border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
  border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) fadein(rgba(0, 0, 0, .1), 15%);
}

// Gradients
#gradient {
  .vertical(@startColor: #555, @endColor: #333) {
    background-color: mix(@startColor, @endColor, 60%);
    background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor), argb(@endColor))); // IE9 and down
  }
}

.reset-filter() {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}

.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { // gradientBar will set the background to a pleasing blend of these, to support IE<=9
  .gradientBar(@startColor, @endColor, @textColor, @textShadow);
  *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  .reset-filter(); // in these cases the gradient won't cover the background, so we override
  &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
    color: @textColor;
    background-color: @endColor;
    *background-color: darken(@endColor, 5%);
  }

// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
  &:active,
  &.active {
    background-color: darken(@endColor, 10%) e("\9");
  }
}


.has-switch {
  display: inline-block;
  cursor: pointer;
  border: 1px solid;
  //border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-color: rgba(0, 0, 0, 0.1);
  position: relative;
  text-align: left;
  overflow: hidden;
  line-height: 8px;
  .user-select(none);
  vertical-align: middle;

  min-width: 100px;

  &.switch-mini {
    min-width: 72px;
  }
  &.switch-mini i.switch-mini-icons {
    height: 1.20em;
    line-height: 9px;
    vertical-align: text-top;
    text-align: center;
    transform: scale(0.6);
    margin-top: -1px;
    margin-bottom: -1px;
  }
  &.switch-small {
    min-width: 80px;
  }

  &.switch-large {
    min-width: 120px;
  }

  &.deactivate {
    .opacity(50);
    cursor: default !important;
    label, span {
      cursor: default !important;
    }
  }
  > div {
    display: inline-block;
    width: 150%;
    position: relative;
    top: 0;

    &.switch-animate {
      .transition(left 0.5s);
    }
    &.switch-off {
      left: -50%;
    }
    &.switch-on {
      left: 0%;
    }
  }
  input[type=radio],
  input[type=checkbox] {
    //debug
    display: none;
    //position: absolute;
    //margin-left: 60%;
    //z-index: 123;
  }

  span, label {
    .box-sizing(border-box);

    cursor: pointer;
    position: relative;
    display: inline-block;
    height: 100%;

    padding-bottom: 4px;
    padding-top: 4px;
    font-size: 14px;
    line-height: 20px;

    &.switch-mini {
      padding-bottom: 4px;
      padding-top: 4px;
      font-size: 10px;
      line-height: 9px;
    }

    &.switch-small {
      padding-bottom: 3px;
      padding-top: 3px;
      font-size: 12px;
      line-height: 18px;
    }

    &.switch-large {
      padding-bottom: 9px;
      padding-top: 9px;
      font-size: 16px;
      line-height: normal;
    }
  }

  label {
    text-align: center;
    margin-top: -1px;
    margin-bottom: -1px;
    z-index: 100;
    width: 34%;
    border-left: 1px solid @btnBorder;
    //border-right: 1px solid @btnBorder;

    .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark);

    i {
      color: #000;
      text-shadow: 0 1px 0 #fff;
      line-height: 18px;
      pointer-events: none;
    }
  }

  span {
    text-align: center;
    z-index: 1;
    width: 33%;

    &.switch-left {
      //.border-left-radius(4px);
    }

    &.switch-right {
      .buttonBackground(@btnBackgroundHighlight, @btnBackground, @grayDark, 0 1px 1px rgba(255,255,255,.75));
      background: @grayLighter;
    }

    &.switch-primary, &.switch-left {
      .buttonBackground(@btnPrimaryBackgroundHighlight, @btnPrimaryBackground);
    }

    &.switch-info {
      .buttonBackground(@btnInfoBackgroundHighlight, @btnInfoBackground);
    }

    &.switch-success {
      .buttonBackground(@btnSuccessBackgroundHighlight, @btnSuccessBackground);
    }

    &.switch-warning {
      .buttonBackground(@btnWarningBackgroundHighlight, @btnWarningBackground);
    }

    &.switch-danger {
      .buttonBackground(@btnDangerBackgroundHighlight, @btnDangerBackground);
    }

    &.switch-default {
      .buttonBackground(@grayLighter, @grayLighter, @grayDark, 0 1px 1px rgba(255,255,255,.75));
    }
  }
}