/*
    Created on : 15/04/2016, 14:25:50
    Author     : tcavalin
*/

/* Mixins */
@mixin radius($geralTopLeft, $topRight : '', $bottomRight : '', $bottomLeft : '') {
  border-radius: $geralTopLeft #{$topRight} #{$bottomRight} #{$bottomLeft};
  -moz-border-radius: $geralTopLeft #{$topRight} #{$bottomRight} #{$bottomLeft};
  -webkit-border-radius: $geralTopLeft #{$topRight} #{$bottomRight} #{$bottomLeft};
  -ms-border-radius: $geralTopLeft #{$topRight} #{$bottomRight} #{$bottomLeft};
}

@mixin no-select() {
  user-select: none;
  -webkit-backface-visibility: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

@mixin transition($transition : all ease 0.3s) {
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -ms-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}

@mixin label($color : #fff) {
	width: 2rem;
	height: 2rem;
	position: absolute;
	top: 4px;
	font-size: 12px;
	font-weight: normal;
	align-items: center;
	justify-content: center;
	display: inline-flex;
	color: $color;
}

.multi-switch {
	width: 109px;

  @include no-select();

  * {
    @include transition();
  }

  .switch-content {
    background: none;
    background-color: #D97C6F;
    height: 40px;
    position: relative;
    cursor: pointer;
    @include radius(0.25rem);

		.switch-bg-no {
			margin-left: 4px;
			@include label(#666);

			&:before {
				content: 'NE';
			}
		}

		.switch-bg-yes {
			left: 100%;
			margin-left: -36px;
			@include label(#666);

			&:before {
				content: 'DA';
			}
		}

    .switch-circle {
      background: #FFF;;
      left: 0%;
      z-index: 1;
      margin-left: 4px;
			@include label(#666);
      @include radius(2px);
    }

    .info-slide{
      position: absolute;
      z-index: 2;
      width: 50%;
      height: 100%;
      display: block;

      &.active{
        right: 0;
        @include radius(0, 31px, 31px, 0);
      }

      &.disable{
        left: 0;
        @include radius(31px, 0, 0, 31px);
      }
    }

    &.active {
      background-color: $primary;

			.switch-bg-yes {
				display: none;
			}

			.switch-bg-no {
				display: none;
			}

      .switch-circle {
        left: 100%;
        margin-left: -36px;

				&:before {
					content: 'DA';
				}
      }
    }

    &.disabled {
      background-color: #CCC;
      cursor: default;
    }

		&.disable {
			.switch-bg-yes {
				display: none;
			}

			.switch-bg-no {
				display: none;
			}

  		.switch-circle {
				&:before {
					content: 'NE';
				}
			}
    }

    &.initial{
      background-color: #DCDFE0;

      .switch-circle {
        left: 50%;
        margin-left: -14.5px;
      }
    }

		span {
			border:none;
			margin-right:0;
		}
  }

  input {
    display: none;
  }
}