/* ============================================================
 * bootstrapSwitch v1.2 by Larentis Mattia @spiritualGuru
 * http://www.larentis.eu/switch/
 * ============================================================
 * Licensed under the Apache License, Version 2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 * ============================================================ */


@import "compass/css3";

$border: rgba($backgroundGray, 0.1) rgba($backgroundGray, 0.1) rgba($backgroundGray, 0.2);

.has-switch {
  display: inline-block;
  cursor: pointer;
  //okendoken. adding $border-radius-base-base instead of predefined one
  //@include border-radius(5px);
  @include border-radius($border-radius-base);
  border: 1px solid;
  border-color: $border;
  background: $gray;
  position: relative;
  text-align: left;
  overflow: hidden;
  line-height: 8px;

  // disable text selection highlighting
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  min-width: 102px;

  &.switch-mini {
    min-width: 72px;
  }

  &.switch-small {
    min-width: 81px;
  }

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

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

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

  span, label {
    @include 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 {
    background: $white;
    margin-top: -1px;
    margin-bottom: -1px;
    z-index: 100;
    width: 33.333333%;
    border-left: 1px solid $gray;
    border-right: 1px solid $gray;

    //okendoken. let it look like .btn-inverse
    //@include background-image(linear-gradient(top, $white, $gray));
    background: $btn-inverse-bg;
  }

  span {
    color: $white;
    text-align: center;
    z-index: 1;
    width: 33.333333%;
    @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15));

    &.switch-left {
      @include border-top-left-radius($border-radius-base);
      @include border-bottom-left-radius($border-radius-base);
    }
    &.switch-right {
      //okendoken. changing to default theme color
      //color: black;
      color: #ffffff;
      @include border-top-right-radius($border-radius-base);
      @include border-bottom-right-radius($border-radius-base);
      //okendoken. let it look like .btn
      //@include background-image(linear-gradient(bottom, $white, $gray));
      background: $btn-default-bg;
    }

    //okendoken. overriding predefined colors
    //&.switch-primary, &.switch-left {
    //  color: $white;
    //  background: $blue;
    //  @include background-image(linear-gradient(bottom, $blue, #0055CC));
    //}
    //&.switch-info {
    //  $startColor: #5BC0DE;
    //  color: $white;
    //  background: $startColor;
    //  @include background-image(linear-gradient(bottom, $startColor, #2F96B4));
    //}
    //&.switch-success {
    //  $startColor: #62C462;
    //  color: $white;
    //  background: $startColor;
    //  @include background-image(linear-gradient(bottom, $startColor, #51A351));
    //}
    //&.switch-warning {
    //  $startColor: #DBB450;
    //  color: $white;
    //  background: $startColor;
    //  @include background-image(linear-gradient(bottom, $startColor, #F89406));
    //}
    //&.switch-danger {
    //  $startColor: #EE5f5B;
    //  color: $white;
    //  background: $startColor;
    //  @include background-image(linear-gradient(bottom, $startColor, #BD362F));
    //}

    &.switch-primary, &.switch-left {
      color: $white;
      background: $blue;
    }
    &.switch-info {
      $startColor: $btn-info-bg;
      color: $white;
      background: $startColor;
    }
    &.switch-success {
      $startColor: $btn-success-bg;
      color: $white;
      background: $startColor;
    }
    &.switch-warning {
      $startColor: $btn-warning-bg;
      color: $white;
      background: $startColor;
    }
    &.switch-danger {
      $startColor: $btn-danger-bg;
      color: $white;
      background: $startColor;
    }
  }
}