.c-switch {
	position: relative;
}

.c-switch__input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.c-switch__label {
	@include border-radius;
	@include font(x2-small, $weight: 500);
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	position: relative;
	user-select: none;
	color: white;
	background: palette(neutral, 100);
	box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
	overflow: hidden;
	transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);

	// Focus style for accessibility
	//.c-switch__input:focus ~ & {
	//	box-shadow: 0 0 5px 2px #fff, 0px 0px 18px 3px rgba(palette(secondary),0.6);
	//}

	&::before,
	&::after {
		position: relative;
		z-index: 1;
		padding: 9px;
		line-height: 1.3;
		text-align: center;
		text-transform: uppercase;
		white-space: nowrap;
		transition: color 0.2s;
	}

	&::before {
		grid-column: 1;
		content: attr(data-checked);

		.c-switch__input:checked ~ & {
			color: rgba(palette(text),0.4);
		}
	}

	&::after {
		grid-column: 2;
		content: attr(data-unchecked);
		color: rgba(palette(light),0.3);

		.c-switch__input:checked ~ & {
			color: inherit;
		}
	}
}

.c-switch__indicator {
	position: absolute;
	z-index: 0; // must go underneath the label
	left: 0;
	top: 0;
	height: 100%;
	width: 50%;
	background: linear-gradient(to bottom, palette(action), adjust_color(palette(action), $red: -50, $green: 26, $blue:-3));
	transition: transform 0.35s cubic-bezier(0.23, 0.18, 0.3, 1);

	&:after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		width: 100%;
		height: 100%;
		background-image: linear-gradient( 270deg, #a02d09 10%, #DE4313 100%);
		opacity: 0;
		transition: opacity 0.35s cubic-bezier(0.23, 0.18, 0.3, 1);
	}

	.c-switch__input:checked ~ .c-switch__label & {
		transform: translateX(101%);

		&:after {
			opacity: 1;
		}
	}
}