@import '../../../styles/_partials/index';

.Switch {
	display: flex;
	align-items: center;
	&.Switch__Flat {
		button,
		button::after,
		button::before {
			box-shadow: none !important;
		}
	}

	label {
		vertical-align: middle;
		display: inline-block;
		font-weight: 700;
		font-size: 11px;
		@include theme-color-gray-else-gray15;
		@include tracking(20);
		margin: 0 5px 0 0;
	}

	&.Switch__Tiny {
		button {
			vertical-align: middle;
			display: inline-block;
			height: 20px;
			width: 48px;

			&::after {
				line-height: 22px;
				font-size: 11px;
				font-weight: 900;
				left: 20px;
			}

			&::before {
				top: -1px;
				width: 12px;
				height: 12px;
			}

			&[aria-pressed="true"] {
				&::before {
					left: calc(100% - 12px);
				}

				&::after {
					top: -1px;
					left: 8px;
				}
			}
		}
	}
	button {
		border-width: 0px;
		box-sizing: border-box;
		font-size: 10px;
		cursor: pointer;
		position: relative;
		transition: background 200ms ease 0ms;
		border-radius: 1.6em;
		box-shadow: inset 0 2px 0 $gray75;
		@include theme-background-gray25-else-graydark50;
		padding: .5em;
		width: 7.25em;
		overflow: hidden;
		display: inline-block;
		-webkit-appearance: none;

		&::before {
			content: "";
			display: block;
			position: relative;
			left: 0;
			transition: left 200ms ease 0ms;
			border-radius: 50%;
			box-shadow: 0 2px 0 $gray75;
			@include __theme-background($white, $gray15);
			width: 2.2em;
			height: 2.2em;
		}

		&::after {
			content: "Off";
			display: block;
			position: absolute;
			top: 0;
			left: 2.6em;
			transition: left 200ms ease 0ms;
			line-height: 2.4;
			@include __theme-color($white, $gray15);
			font-size: 1.4em;
			font-weight: 700;
		}

		&[aria-pressed="true"] {
			@include if-theme-dark() {
				box-shadow: inset 0 2px 0 $green-dark50;
				background: $green;
			}

			@include if-theme-light() {
				box-shadow: inset 0 2px 0 $gray-dark50;
				background: $green-dark;
			}
		}

		&[aria-pressed="true"]::before {
			left: calc(100% - 2.2em);
			background: $white;

			@include if-theme-dark() {
				box-shadow: 0 2px 0 $green-dark50;
			}
			@include if-theme-light() {
				box-shadow: 0 2px 0 $gray-dark50
			}
		}

		&[aria-pressed="true"]::after {
			content: "On";
			left: 1em;
			color: $white;
		}

		&[disabled] {
			box-shadow: inset 0 2px 0 $gray25;
			@include theme-background-gray25-else-graydark50;
		}

		&[disabled] button {
			cursor: not-allowed;
		}

		&[disabled]::after,
		&[disabled]::before {
			color: $gray75;
		}

		&[disabled]::before {
			box-shadow: 0 2px 0 $gray25;
			@include theme-background-gray15-else-gray;
		}

		button {
			opacity: 0;
			position: absolute;
			width: 100%;
			height: 100%;
			margin: 0;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
			cursor: pointer;
		}
	}

	button[data-no-value="true"] {
		&::before {
			left: 50% !important;
			margin-left: -6px !important;
		}

		&::after {
			display: none;
		}
	}
}