/* This stylesheet only applies to Legacy Reader mode */

.devices-wrapper {
	position: relative;
}

.amp-toggle {
	position: absolute;
	display: inline-block;
	width: 30px;
	height: 15px;
	top: 15px;
	left: -47px;
}

.amp-toggle input,
.amp-toggle input.disabled {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	margin: 0;
	padding: 0;
	z-index: 1;
}

.amp-toggle .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 34px;
	background-color: #555d66;
	-webkit-transition: .3s;
	transition: .3s;
	transition-property: background-color, transform, -webkit-transform, -ms-transform, opacity;
}

.amp-toggle input:focus,
.amp-toggle input:active {
	outline: none;
}

.amp-toggle input:hover + .slider,
.amp-toggle input:focus + .slider,
.amp-toggle input:active + .slider {
	box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
}

.amp-toggle .slider::before {
	position: absolute;
	content: "";
	height: 13px;
	width: 13px;
	top: 1px;
	left: 1px;
	border-radius: 50%;
	background-color: transparent;
	background-image: url("../images/amp-white-icon.svg");
	background-size: 13px 13px;
	-webkit-transition: .3s;
	transition: .3s;
}

.amp-toggle input:checked + .slider {
	background-color: #0379c4;
}

.amp-toggle input:checked + .slider::before {
	-webkit-transform: translateX(15px);
	-ms-transform: translateX(15px);
	transform: translateX(15px);
}

.amp-toggle input.disabled + .slider {
	opacity: 0.7;
}

.amp-toggle .tooltip {
	position: absolute;
	bottom: 25px;
	left: -115px;
	width: 230px;
	font-size: 13px;
	text-align: center;
	color: #fff;
	background: #191e23;
	padding: 15px;
	z-index: 1;
	cursor: default;
	display: none;
}

.amp-toggle .tooltip a {
	color: #00a0d2;
}

.amp-toggle .tooltip a:hover,
.amp-toggle .tooltip a:focus,
.amp-toggle .tooltip a:active {
	color: #54cbf1;
}

.amp-toggle .tooltip::before {
	position: absolute;
	bottom: -8px;
	left: 120px;
	content: "";
	border: solid;
	border-color: #191e23 transparent;
	border-width: 8px 8px 0 8px;
}

.js .accordion-section-title::after {
	z-index: 0;
}

.wp-core-ui .wp-full-overlay .collapse-sidebar {

	/* Add same padding to right as left since label now hidden. */
	padding: 9px 10px;
}

#customize-footer-actions .collapse-sidebar-label {

	/* This is moved to a tooltip in amp-customize-controls-legacy.js */
	display: none;
}

.wp-full-overlay-footer .devices {

	/* Remove box-shadow because not needed to cause long "Hide Controls" text to fade since it is hidden altogether. */
	box-shadow: none;
}

.devices-wrapper .preview-desktop {
	border-left: 1px solid #ddd !important;
}

.wp-full-overlay-footer .devices button::before {
	vertical-align: initial;
}
