/* stylelint-disable max-nesting-depth */

//
// - Checkboxes & Radio pill buttons
// -------------------------------------------------------------
@import '../variables/colors.less';
@import '../variables/typography.less';

// Standard Checkboxes & Radio
.o-radio,
.o-checkbox {
	align-items: center;
	display: flex;
	margin-bottom: 10px;
	margin-top: 10px;
	min-height: 20px;

	label {
		align-items: stretch;
		cursor: pointer;
		display: flex;
		font-family: @font-stack-main;
		font-weight: 400;
		margin-bottom: 0;
		padding-left: 20px;

		&.o-checkbox__label--disabled {
			color: #999;
		}

		span.o-checkbox__description {
			margin-left: 3px;
		}
	}

	input[type='radio'],
	input[type='checkbox'] {
		margin-left: -20px;
		margin-right: 8px;
	}
}

// Inline versions
.o-radio-inline,
.o-checkbox-inline {
	.o-form-group & {
		cursor: pointer;
		display: inline-block;
		font-weight: 400;
		margin-bottom: 0;
		padding-left: 40px;
		vertical-align: middle;

		&:nth-of-type(1),
		&:nth-of-type(2) {
			padding-left: 20px;
		}
	}

	input[type='radio'],
	input[type='checkbox'] {
		float: left;
		margin-left: -20px;
	}
}

// Inline "selections" are special textboxes are dropdowns that
// appear as "part of" a radio or checkbox label
.o-inline-selection-text-group {
	input[type='radio'] {
		margin-top: 11px;
	}
}

.o-inline-selection-text-group__text {
	display: inline-block;
	padding: 0 4px;
	width: 120px;

	.o-form-control {
		display: inline-block;
	}
}

.o-inline-selection-text-group__text--small {
	width: 74px;
}

// Disabled classes
.c-disabled-option {
	color: @color-gray-light;
	font-style: italic;
}

.c-disabled-option--warning {
	color: @color-danger;
	display: block;
	font-style: normal;
	font-weight: bold;
}

// Checkboxes & Radio pill buttons
//
// We hide the native buttons, then style the label instead to
// give them a visible target. If using "for" on the label (one
// ought to), clicking it will toggle the input as well.
//
// We still want the input to be selectable / tabbable for
// accessibility purposes, so we position the actual button way
// offscreen. Most of the magic happens on the label itself. No
// wrapper is needed around the label and the input.
// ------------------------------------------------------------------
.o-radio-pill,
.o-checkbox-pill {
	left: -999em;
	position: absolute;
}

.o-radio-pill-label,
.o-checkbox-pill-label {
	background-color: @color-gray-xxx-light;
	border: 1px solid @color-gray-xx-light;
	border-radius: 4px;
	cursor: pointer;
	display: block;
	font-family: @font-stack-main;
	font-weight: @font-weight-regular;
	margin: 0;
	padding: 7px;
	transition: all 0.4s;

	&.is-disabled {
		opacity: 0.5;
		pointer-events: none;
	}

	&.is-inline-block {
		display: inline-block;
		padding-right: 16px;
	}

	&.is-label-only {
		&::before {
			display: none;
		}

		& .o-radio-pill-label__label {
			align-items: center;
			display: flex;

			& span {
				margin-left: 10px;
				margin-right: 5px;
			}
		}
	}
}

// The 'before' pseudo-selector handles the FA checkmark.
.o-radio-pill-label::before,
.o-checkbox-pill-label::before {
	color: @color-gray-medium;

	// Pasted in the font awesome "fa" class properties here:
	display: inline-block;
	font: normal normal 400 14px/1 'Font Awesome 5 Pro';
	font-size: inherit;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-right: 4px;

	// Fixed width and center align prevent the icon from jumping around
	text-align: center;
	text-rendering: auto;
	transition: all 0.4s;
	width: 20px;
}

.o-radio-pill:checked + .o-radio-pill-label::before {
	content: '\f058'; // fa-check-circle
}

.o-radio-pill:not(:checked) + .o-radio-pill-label::before {
	content: '\f111'; // fa-circle-thin
}

.o-checkbox-pill:checked + .o-checkbox-pill-label::before {
	content: '\f14a'; // fa-check-square
}

.o-checkbox-pill:not(:checked) + .o-checkbox-pill-label::before {
	content: '\f0c8'; // fa-square-o
}

// Accessibility & tab-selection visual feedback
.o-radio-pill:focus + .o-radio-pill-label,
.o-checkbox-pill:focus + .o-checkbox-pill-label {
	box-shadow: 0 0 3px @color-success;
}

// Hover & click/touch feedback for the labels
.no-touch .o-radio-pill-label:hover,
.no-touch .o-checkbox-pill-label:hover {
	background-color: darken(@color-gray-xxx-light, 2.5%);
}

.o-radio-pill-label:active,
.o-checkbox-pill-label:active {
	transform: scale(0.95);
}

// Checked ones are colored green
.o-radio-pill:checked + .o-radio-pill-label,
.o-checkbox-pill:checked + .o-checkbox-pill-label {
	background-color: @color-success-light;
	border-color: darken(@color-success-light, 10%);
	color: @color-success;

	&::before {
		color: @color-success;
	}
}

// Compact buttons don't have a label, so we tweak the styles to compensate
.o-radio-pill-label--compact,
.o-checkbox-pill-label--compact {
	display: inline-block;

	&::before {
		margin-right: 0;
	}
}

/* stylelint-enable max-nesting-depth */