/**
* Toogle
*/
.components-form-toggle {
	&.is-checked .components-form-toggle__track {
		background-color: var(--ols-primary-color);
	}
	.components-form-toggle__input:focus + .components-form-toggle__track {
		box-shadow:
			0 0 0 var(--wp-admin-border-width-focus) #fff,
			0 0 0 calc(var(--wp-admin-border-width-focus) * 2)
				var(--wp-components-color-accent, var(--ols-primary-color, #3858e9));
	}
}

/**
* Buttons
*/
.components-button {
	&.is-primary {
		background: var(--ols-primary-color);
		border-radius: var(--ols-border-radius);
		&:hover {
			background: var(--alpc-app-secondary-color);
			color: var(--ols-primary-color);
			border: 1px solid var(--ols-primary-color);
		}
	}
	&.is-secondary {
		border-radius: var(--ols-border-radius);
		box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--ols-primary-color, var(--ols-primary-color)));
		color: var(--ols-primary-color);
		&.is-white {
			border-radius: var(--ols-border-radius);
			box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--ols-secondary-color, var(--ols-secondary-color)));
			color: var(--ols-secondary-color);

		}
	}
	&.is-link {
		color: var(--wp-components-color-accent, var(--ols-primary-color, #3858e9));
	}
}

/**
 * Radio.
 */
.components-radio-control__input[type="radio"] {
	&:checked {
		background: var(--wp-components-color-accent, var(--ols-primary-color, #3858e9));
		border-color: var(--wp-components-color-accent, var(--ols-primary-color, #3858e9));
	}

	&:focus {
		box-shadow: 0 0 0 2px var(--wp-components-color-background, #fff), 0 0 0 4px var(--wp-components-color-accent, var(--ols-primary-color, #3858e9));
	    }
}