/* Checkbox */
.bb-rl-styled-checkbox,
.bb-readylaunch-template input[type="checkbox"]:not(.bb-custom-check) {
	position: absolute; // take it out of document flow
	opacity: 0; // hide it

	+ label {
		cursor: pointer;
		display: inline-flex;
		position: relative;
		padding: 0;
		line-height: 1;
	}

	// Box.
	+ label:before {
		content: "";
		margin-right: var(--bb-rl-space-100);
		display: inline-block;
		vertical-align: text-top;
		width: 16px;
		height: 16px;
		background: var(--bb-rl-background-color);
		border-radius: var(--bb-rl-radius-sm);
		border: 1px solid var(--bb-rl-border-tertiary-color);
	}

	// Box focus
	&:focus + label:before {
		border-color: var(--bb-rl-background-brand-primary-color);
	}

	// Box checked
	&:checked + label:before {
		background: var(--bb-rl-background-brand-primary-color);
		border-color: var(--bb-rl-background-brand-primary-color);
	}

	// Disabled state label.
	&:disabled + label {
		color: var(--bb-rl-border-disabled-color);
		cursor: auto;
	}

	// Disabled box.
	&:disabled + label:before {
		box-shadow: none;
		background: var(--bb-rl-border-disabled-color);
	}

	// Checkmark. Could be replaced with an image
	&:checked + label:after {
		content: "\e182";
		position: absolute;
		left: 2px;
		top: 2px;
		font-family: bb-icons-rl;
		font-weight: 700;
		color: var(--bb-rl-text-white-color);
		font-size: 13px;
		display: block;
	}
}

.bs-styled-radio {
	position: absolute;
	opacity: 0;
}

/* Radio */
.bb-rl-radio-style {
	position: relative;
	line-height: 1;

	input[type="radio"] {
		opacity: 0;
		height: 0;
		width: 0;
	}

	input[type="radio"] + span {
		position: relative;
		display: inline-block;
		width: 16px;
		height: 16px;
	}

	input[type="radio"] + span:before {
		content: "";
		display: inline-block;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 16px;
		height: 16px;
		line-height: 1;
		border: 2px solid var(--bb-rl-border-quaternary-color);
		border-radius: 100%;
	}

	input[type="radio"]:checked + span:before {
		border: 8px solid var(--bb-rl-background-brand-primary-color);
	}

	input[type="radio"]:checked + span:after {
		content: "";
		background-color: var(--bb-rl-background-color);
		margin: auto;
		width: 8px;
		height: 8px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		border-radius: 100%;
	}
}

.bb-readylaunch-template input[type="radio"] {

	+ label {
		display: inline-flex;
		align-items: center;
		position: relative;
		cursor: pointer;
		padding: 0;
	}

	+ label:before {
		content: "";
		display: inline-block;
		vertical-align: middle;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 16px;
		height: 16px;
		line-height: 1;
		background-color: var(--bb-rl-background-color);
		border: 1px solid var(--bb-rl-border-quaternary-color);
		border-radius: 100%;
		margin-right: var(--bb-rl-space-100);
	}

	&:disabled + label {
		color: #b8b8b8;
		cursor: auto;
	}

	&:disabled + label:before {
		box-shadow: none;
		background: var(--bb-rl-background-color);
	}

	&:checked + label:before {
		border-width: 4px;
		border-color: var(--bb-rl-background-brand-primary-color);
	}

	&.bs-styled-radio:checked + label:after {
		opacity: 0;
	}
}
