/**
 * Buttons.
 */
.amp .components-button:not(.components-panel__body-toggle) {
	align-items: center;
	border-radius: 3px;
	color: var(--amp-settings-color-brand);
	font-size: 1rem;
	font-weight: 600;
	padding: 0.5rem 1rem;
}

.amp .components-button:not(.components-panel__body-toggle) svg {
	fill: currentColor;
	margin: 0 0.5rem;
	height: 18px;
	width: 18px;
}

.amp .components-panel__body-title button {
	font-size: 16px;
	font-weight: 600;
}

.amp .components-panel__body-title:hover {
	background: var(--amp-settings-color-background);
}

.amp .components-button.is-link,
.amp .components-button.is-link:hover,
.amp .components-button.is-link:hover:not(:disabled),
.amp .components-button:not(.components-panel__body-toggle):focus,
.amp .components-button:not(.components-panel__body-toggle):focus:not(:disabled),
.amp .components-button:not(.components-panel__body-toggle):hover {
	box-shadow: none;
	color: var(--amp-settings-color-brand);
	text-decoration: none;
}

.amp .components-button.is-secondary,
.amp .components-button.is-secondary:hover,
.amp .components-button.is-secondary:hover:not(:disabled) {
	border-color: var(--amp-settings-color-brand);
	box-shadow: inset 0 0 0 1px var(--amp-settings-color-brand);
}

.amp.amp .components-button:focus:not(:disabled) {
	outline: 1px solid var(--amp-settings-color-brand);
}

.amp .components-button.is-primary {
	box-shadow: 0 25px 20px rgba(0, 0, 0, 0.1);
}

.amp .components-button.is-primary,
.amp .components-button.is-primary:hover,
.amp .components-button.is-primary:hover:not(:disabled),
.amp .components-button.is-primary:focus,
.amp .components-button.is-primary:focus:not(:disabled),
.amp .components-button.is-primary:active,
.amp .components-button.is-primary:not(:disabled):not([aria-disabled="true"]):hover {
	background: var(--amp-settings-color-brand);
	color: var(--amp-settings-color-background);
	text-shadow: none;
}

.amp .components-button.is-primary:disabled {
	color: rgba(255, 255, 255, .8);
	background: rgba(0, 0, 0, 0.3);
	border-color: rgba(0, 0, 0, 0.3);
}

.amp .components-button.is-primary:disabled.is-busy {
	background-size: 100% 100%;
	background-image: linear-gradient(-45deg, var(--amp-settings-color-brand) 28%, rgba(36, 89, 231, .8) 28%, rgba(36, 89, 231, .8) 72%, var(--amp-settings-color-brand) 72%);
	border-color: var(--color-gray-medium);
}

.amp .components-toggle-control .components-base-control__field .components-toggle-control__label {
	display: flex;
	flex-wrap: wrap;
}

.amp .components-button.is-small {
	font-size: 0.875rem;
}


.amp .components-toggle-control .components-base-control__field {
	align-items: center;
	margin-bottom: 0;
}

.amp .components-form-toggle .components-form-toggle__track {
	border: 2px solid var(--color-gray-medium);
}

.amp .components-form-toggle .components-form-toggle__thumb {
	background-color: var(--color-gray-medium);
	border-width: 0;
	top: 4px;
	left: 4px;
	width: 10px;
	height: 10px;
}

.amp .components-form-toggle.is-checked .components-form-toggle__thumb {
	background-color: var(--amp-settings-color-background);
}

.amp .components-form-toggle.is-checked .components-form-toggle__track {
	background-color: var(--amp-settings-color-brand);
	border-width: 0;
}

.amp .components-form-toggle__input:focus + .components-form-toggle__track {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--amp-settings-color-brand);
}

.amp .components-checkbox-control__input[type="checkbox"]:checked {
	background: var(--amp-settings-color-brand);
	border-color: var(--amp-settings-color-brand);
}

.amp .components-checkbox-control__input[type="checkbox"] {
	border: 2px solid var(--color-gray-medium);
	height: 18px;
	width: 18px;
}

.amp svg.components-checkbox-control__checked {
	width: 18px;
	height: 22px;
	fill: rgb(255, 255, 255);
	position: absolute;
}

/* For WP 5.0. Some of these styles are redundant in later WP versions. */
.amp input[type="checkbox"]:checked::before {
	display: none;
}

.amp .components-checkbox-control__input-container {
	width: 16px;
	height: 16px;
	margin-right: 12px;
	position: relative;
	display: inline-block;
	vertical-align: middle;
}

/**
 * Fixed nav bar on both the settings screen and the wizard.
 */
.amp-settings-nav {
	align-items: center;
	background: var(--amp-settings-color-background);
	bottom: 0;
	box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
	display: flex;
	justify-content: flex-end;
	left: 0;
	position: fixed;
	right: 0;
	z-index: 2;
}

.amp-settings-nav__inner {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1320px;
	padding: 15px;
	width: 100%;

	@media screen and (min-width: 783px) {
		padding: 20px 90px;
	}
}

.amp-settings-nav__inner .components-button {
	margin: 5px 0;
}
