.newspack-ui {
	input[type="checkbox"],
	input[type="radio"] {
		appearance: none;
		background: white;
		border: solid 1px var(--newspack-ui-color-input-border);
		box-shadow: none;
		color: white;
		cursor: pointer;
		display: inline-grid;
		font: inherit;
		height: var(--newspack-ui-spacer-4) !important;
		margin: 0;
		place-content: center;
		transition:
			background-color 125ms ease-in-out,
			border-color 125ms ease-in-out,
			outline 125ms ease-in-out;
		width: var(--newspack-ui-spacer-4) !important;

		&::before {
			content: "";
			display: block;
			opacity: 0;
		}

		&:checked {
			&::before {
				opacity: 1;
			}
		}

		&:focus {
			outline: unset;
		}

		&:focus-visible {
			outline: 2px solid var(--newspack-ui-color-neutral-90);
			outline-offset: 1px;

			&:not(:checked) {
				border: 0;
				outline-offset: -1px;
			}
		}

		&:disabled {
			cursor: not-allowed;
			opacity: 0.75;
		}
	}

	input[type="checkbox"] {
		border-radius: var(--newspack-ui-border-radius-2xs);

		&::before {
			background:
				transparent
				url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z' fill='white'%3E%3C/path%3E%3C/svg%3E")
				0 0 no-repeat;
			height: var(--newspack-ui-spacer-5);
			margin: 0;
			width: var(--newspack-ui-spacer-5);
		}

		&:checked {
			background: var(--newspack-ui-color-neutral-90);
			border-color: transparent;
		}
	}

	input[type="radio"] {
		border-radius: 100%;

		&::before {
			background: var(--newspack-ui-color-neutral-0);
			border-radius: 100%;
			height: var(--newspack-ui-spacer-base);
			width: var(--newspack-ui-spacer-base);
		}

		&:checked {
			background: var(--newspack-ui-color-neutral-90);
			border-color: var(--newspack-ui-color-neutral-90);
		}
	}
}
