/* wc.ui.togglebutton.scss */
// toggle button styles based on https://codepen.io/mallendeo/pen/eLIiG
@import 'mixins-common';

.wc-togglebutton {
	@include border;
	background-color: $wc-ui-color-highlight-bg;
	border-radius: $wc-togglebutton-slider-width;
	height: $wc-togglebutton-slider-width;
	// outline: 0;
	position: relative;
	transition: $wc-togglebutton-transition;
	user-select: none;
	width: $wc-togglebutton-width;

	&:after {
		@include border;
		background-color: $wc-ui-color-highlight-bg;
		border-radius: $wc-togglebutton-slider-width;
		content: '';
		display: block;
		height: calc(100% - $wc-togglebutton-double-border-width);
		left: 0;
		position: relative;
		transition: $wc-togglebutton-transition-slider;
		width: 50%;
	}

	&.wc_ro_sel,
	&[aria-checked='true'] {
		&:after {
			left: calc(50% - $wc-togglebutton-double-border-width);
		}
	}

	&[aria-checked='true'] {
		background-color: $wc-ui-color-togglebutton-selected;

		// invite ???
		&:focus {
			background-color: $wc-ui-color-invite-bg;
		}
	}

	&[disabled] {
		background-color: $wc-ui-color-disabled-bg;
	}

	&.wc_ro {
		background-color: $wc-ui-color-global-bg;
	}

	> span {
		@include offscreen;
	}
}
