@import '../../../styles/mixins';

//Local Variables
$namespace: ".toggleSwitch";
$toggle-switch-height: 40px;
$toggle-switch-height-small: 28px;
$toggle-switch-border-color: $gray;

//Local Placeholders
%sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

// Component Styles
#{$namespace} {
	&_group {
		position: relative;
		display: flex;
		align-items: center;
		height: $toggle-switch-height;

		&--small {
			height: $toggle-switch-height-small;
		}

		.sr-only {
			@extend %sr-only;
		}
	}

	&_label {
		cursor: pointer;
		height: 100%;
		
		svg {
			height: 10px;
			fill: $deep-gray;
		}

		&:first-of-type {
			#{$namespace}_text {
				border-radius: 3px 0 0 3px;
				border-left: 1px solid $toggle-switch-border-color;
			}
		}

		&:last-of-type {
			#{$namespace}_text {
				border-radius: 0 3px 3px 0;
				border-right: 1px solid $toggle-switch-border-color;
			}
		}

		&:not(:last-of-type) {
			#{$namespace}_text {
				border-right: 1px solid $toggle-switch-border-color;
			}
		}
	}

	&_input {
		position: absolute;
		height: 1px;
		width: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);

		&:checked {
			& ~ #{$namespace}_text {
				background-color: $primary-color;
				border-color: darker(0.15);
				color: $white;
				box-shadow: inset 0px 0px 1px 0px rgba($black, 0.2);

				svg {
					fill: $white;
				}
			}
		}

		&:focus {
			& ~ #{$namespace}_text {
				outline: -webkit-focus-ring-color auto 5px;
			}
		}

		&:hover {
			& ~ #{$namespace}_text {
				box-shadow: $button_box-shadow;
			}
		}
	}

	&_legend {
		&Text {
			&--hidden {
				@extend %sr-only;
			}
			&:not(&--hidden) {
				margin-right: 10px;
			}
		}
	}

	&_text {
		display: flex;
		align-items: center;
		height: 100%;
		padding: 0 15px;
		color: $deep-gray;
		background-color: $white;
		border-top: 1px solid $toggle-switch-border-color;
		border-bottom: 1px solid $toggle-switch-border-color;
	}
}