// Color Picker
.color-picker {
	.color-window {
		padding: 5px;
		background: #fff;
		box-shadow: inset 0 0 0 1px #ced4da;
		display: inline-block;

		.color {
			width: 36px;
			height: 36px;
		}
	}

	.type-selector {
		position: absolute;
		z-index: 2;

		.background-cover {
			position: fixed;
			top: 0px;
			right: 0px;
			bottom: 0px;
			left: 0px;
		}

		.github-picker {
			width: auto !important;
			box-shadow: none !important;
			border-radius: 0 !important;
		}
	}
}

// Loading Pacer component positioning
.loading-pacer {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1500;
}

// Switch Toggle Component
.rc-switch {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	width: 44px;
	height: 22px;
	line-height: 20px;
	padding: 0;
	vertical-align: middle;
	border-radius: 20px 20px;
	border: 1px solid #ccc;
	background-color: #ccc;
	cursor: pointer;
	transition: all 0.5s cubic-bezier(0.35, 0, 0.25, 1);

	&-inner {
		color: #fff;
		font-size: 12px;
		position: absolute;
		left: 24px;
		top: 0;
	}

	&:after {
		position: absolute;
		width: 18px;
		height: 18px;
		left: 2px;
		top: 1px;
		border-radius: 50% 50%;
		background-color: #fff;
		content: " ";
		cursor: pointer;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
		transform: scale(1);
		transition: left 0.5s cubic-bezier(0.35, 0, 0.25, 1);
		animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
		animation-duration: 0.5s;
		animation-name: rcSwitchOff;
	}

	&:hover:after {
		transform: scale(1.1);
		animation-name: rcSwitchOn;
	}

	&:focus {
		box-shadow: 0 0 0 2px tint(#2db7f5, 80%);
		outline: none;
	}

	&-checked {
		border: 1px solid #4bbf73;
		background-color: #4bbf73;

		.rc-switch-inner {
			left: 6px;
		}

		&:after {
			left: 22px;
		}
	}

	&-disabled {
		cursor: no-drop;
		background: #ccc;
		border-color: #ccc;

		&:after {
			background: #9e9e9e;
			animation-name: none;
			cursor: no-drop;
		}

		&:hover:after {
			transform: scale(1);
			animation-name: none;
		}
	}

	&-label {
		display: inline-block;
		line-height: 20px;
		font-size: 14px;
		padding-left: 10px;
		vertical-align: middle;
		white-space: normal;
		pointer-events: none;
		user-select: text;
	}
}

@keyframes rcSwitchOn {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.25);
	}
	100% {
		transform: scale(1.1);
	}
}

@keyframes rcSwitchOff {
	0% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}
