// Flipswitch

.flipswitch {
	label {
		display: inline;
		text-transform: uppercase;
		cursor: pointer;

		input {
			display: none;
		}
	}

	.flipswitch-lbl-no {
		color: $black;
	}

	.flipswitch-lbl-yes {
		color: lighten($black, 70%);
		&:hover {
			color: $black;
		}
	}

	.flipswitch-sliders {
		display: inline-block;
		position: relative;
		width: 45px; height: 24px;
		margin: 0 $spacingXs;
		border-radius: 12px;
		vertical-align: middle;
		cursor: default;
	}

	.flipswitch-outer {
		display: block;
		width: 100%; height: 100%;
		overflow: hidden;
	}

	.flipswitch-inner {
		display: block;
		width: 200%; height: 100%;
		@include margin-left($rtl, -100%);

		-webkit-transition: margin-left 0.2s ease-in;
    transition: margin-left 0.2s ease-in;
	}

	.flipswitch-btn-no, .flipswitch-btn-yes {
		@include float-left($rtl);
		width: 50%; height: 100%;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba($black, (20/100)) inset;
	}

	.flipswitch-btn-no {
    @include float-right($rtl);
		background: $grayLighter;

    .flipswitch-icon{
      @include margin-left($rtl, 27px);
      color: $gray;
      margin-top: 7px;
			font-size: 10px;
    }
	}

	.flipswitch-btn-yes {
		background: $green3;
    .flipswitch-icon{
      margin-top: 6px;
      @include margin-left($rtl, 7px);
      color: white;
      font-size: 12px;
    }
	}

	.flipswitch-slider {
		position: absolute;
		@include left($rtl, 0);
		top: 2px;
		width: 20px; height: 20px;
		@include margin-left($rtl, 2px);
		border-radius: 12px;
		background: $white;
    background: linear-gradient(to bottom, $white, darken($white, 8%));
		text-align: center;
		line-height: 20px;
		font-size: 8px;
		color: mix(#000000, $white, 15%);
		cursor: pointer;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);

		-webkit-transition: left 0.2s ease-in, margin-left 0.2s ease-in;
    transition: left 0.2s ease-in, margin-left 0.2s ease-in;

    &:hover {
    	background: mix(#000000, $white, 5%);
      background: linear-gradient(to bottom, mix(#000000, $white, 5%), darken(mix(#000000, $white, 5%), 8%));
    }
	}

	&.flipswitch-yes {
		.flipswitch-lbl-no {
			color: lighten($black, 70%);
			&:hover {
				color: $black;
			}
		}
		.flipswitch-lbl-yes {
			color: $black;
		}
		.flipswitch-inner {
			@include margin-left($rtl, 0);
		}
		.flipswitch-slider {
			@include left($rtl, 100%);
			@include margin-left($rtl, -22px);
		}
	}
}