$custom-switch-width: 2.25rem;
$custom-switch-height: 1.25rem;
$custom-switch-padding: 1px;

.custom-switch {
    @extend .margin-0;
	user-select: none;
	cursor: default;
	display: inline-flex;
    align-items: center;
    padding: 0;
}

.custom-switch-input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.custom-switches-stacked {
	display: flex;
	flex-direction: column;

	.custom-switch {
		margin-bottom: .5rem;
	}
}

.custom-switch-indicator {
    @include border-radius(50px);
	@include inline-block();
	height: $custom-switch-height;
	width: $custom-switch-width;
    background: $gray-200;
    transition: .3s border-color, .3s background-color;
	position: relative;
	vertical-align: bottom;
	border: 1px solid $border-color;	

	&:before {
        @include border-radius(50%);
		height: calc(#{$custom-switch-height} - #{$custom-switch-padding * 2 + 2px});
		width: calc(#{$custom-switch-height} - #{$custom-switch-padding * 2 + 2px});
		top: $custom-switch-padding;
		left: $custom-switch-padding;
        background: $white;
        content: '';
		position: absolute;
		transition: .3s left;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
	}

	.custom-switch-input:checked ~ & {
		background: $primary;

		&:before {
			left: calc(#{$custom-switch-width - $custom-switch-height} + #{$custom-switch-padding})
		}
	}

	.custom-switch-input:focus ~ & {
		//box-shadow: $input-btn-focus-box-shadow;
		border-color: $primary;
	}
}

.custom-switch-description {
    color: $gray-500;
	margin-left: .5rem;	
	transition: .3s color;

	.custom-switch-input:checked ~ & {
		color: $font-color;
	}
}