@import "../node_modules/delite/css/mixins";
@import "../node_modules/delite/css/variables";

.d-radio-button-styles () {
	margin: 4px;
}

.d-radio-button-active-styles () {
}

.d-radio-button-disabled-styles() {
	background-color:  @input-bg-disabled;
}

.d-radio-button-focused () {
	outline: thin dotted;
	//WebKit
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}

.d-radio-button-before-styles () {
	border-color: @input-border;
	border-style: solid;
	border-width: 1px;
	border-radius: 0.5em;
	width: 1em;
	height: 1em;
	line-height: 1em;
	background-image: linear-gradient(to bottom, #ededed 0%, #dedede 100%);
}

@d-radio-button-disabled-color: @input-bg-disabled;

.d-radio-button-checked-before-styles () {
	color: @input-color;
}

.d-radio-button-before-disabled-styles () {
	color: @input-bg-disabled;
}
.d-radio-button-checked-before-disabled-styles () {
	color: @btn-link-disabled-color;
}

.d-radio-button {
	position: relative;
	display: inline-block;
	.d-radio-button-styles();
	&.d-focused { // from tab-focus()
		.d-radio-button-focused();
	}
	.d-radio-button-icon::before {		// <span> containing the black dot
		display: inline-block;
		text-align: center;
		content: "\00A0";			// non-breaking space
		font-family: Times;			// avoid alignment problems of center dot when app is using a custom font
		.d-radio-button-before-styles();
	}
	&.d-checked .d-radio-button-icon::before {
		content: "\25CF";			// "black circle" character
		.d-radio-button-checked-before-styles();
	}
	&:active .d-radio-button-icon::before {
		.d-radio-button-active-styles();
	}
	&.d-disabled .d-radio-button-icon::before {
		.d-radio-button-before-disabled-styles();
		&.d-checked .d-radio-button-icon::before {
			.d-radio-button-checked-before-disabled-styles();
		}
	}
	&.d-disabled,
	fieldset[disabled] & {
		cursor: not-allowed;
	}
}

.d-radio-button > input[type=radio] {
	opacity: 0.01;
	position: absolute;
	top: 0;
	left: 0;
	width: 0.8em;
	height: 0.8em;
	overflow: hidden;
	font: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	&[disabled],
	fieldset[disabled] & {
		cursor: not-allowed;
	}
}