/*
 * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md.
 */

@import "../../../mixins/_rounded.css";
@import "../../../mixins/_disabled.css";

/* Note: To avoid rendering issues (aliasing) but to preserve the responsive nature
of the component, floating–point numbers have been used which, for the default font size
(see: --ck-font-size-base), will generate simple integers. */
:root {
	/* 34px at 13px font-size */
	--ck-switch-button-toggle-width: 2.6153846154em;
	/* 14px at 13px font-size */
	--ck-switch-button-toggle-inner-size: 1.0769230769em;
	--ck-switch-button-toggle-spacing: 1px;
}

.ck.ck-button.ck-switchbutton {
	& .ck-button__label {
		/* Separate the label from the switch */
		margin-right: calc(2*var(--ck-spacing-large));
	}

	&.ck-disabled .ck-button__toggle {
		@mixin ck-disabled;
	}

	& .ck-button__toggle {
		@mixin ck-rounded-corners;

		/* Make sure the toggle is always to the right as far as possible. */
		margin-left: auto;

		/* Gently animate the background color of the toggle switch */
		transition: background 400ms ease;

		width: var(--ck-switch-button-toggle-width);
		background: var(--ck-color-switch-button-off-background);

		& .ck-button__toggle__inner {
			@mixin ck-rounded-corners {
				border-radius: calc(.5*var(--ck-border-radius));
			}

			/* Leave some tiny bit of space around the inner part of the switch */
			margin: var(--ck-switch-button-toggle-spacing);
			width: var(--ck-switch-button-toggle-inner-size);
			height: var(--ck-switch-button-toggle-inner-size);
			background: var(--ck-color-switch-button-inner-background);

			/* Gently animate the inner part of the toggle switch */
			transition: transform 300ms ease;
		}
	}

	&.ck-on .ck-button__toggle {
		background: var(--ck-color-switch-button-on-background);

		& .ck-button__toggle__inner {
			/*
			 * Move the toggle switch to the right. It will be animated.
			 *
			 * Edge is not supporting calc() in the transitions and animations, we need to hardcode this value (see ckeditor5-ui#433).
			 * It boils down to:
			 *
			 * 	calc(
			 * 		var(--ck-switch-button-toggle-width) -
			 * 		var(--ck-switch-button-toggle-inner-size) -
			 * 		2*var(--ck-switch-button-toggle-spacing) )
			 * 	)
			 */
			transform: translateX( 1.3846153847em );
		}
	}
}