﻿/*Custom Control*/
.custom-checkbox,
.custom-radio
{
	padding-left:24px;
	margin:0.5rem 0;
}
.custom-checkbox a:not(.entry-link),
.custom-radio a:not(.entry-link)
{
	color:var(--primary-700)
}

/*Custom Control - Inline*/
.inline-custom-control
{
	display:inline-flex;
	margin:8px 12px 0 0;
}
.inline-custom-control:last-child
{
	margin:8px 0 0 0;
}

/*Custom Control - Label*/
.custom-control-label
{
	padding-left:10px;
}
.custom-control-input:not(disabled) ~ .custom-control-label
{
	cursor:pointer;
}

/*Custom Control - Label - Before*/
.custom-control-label::before
{
	top:50%;
	transform:translateY(-50%);
	left:-24px;
	width:24px;
	height:24px;
	border:0;
	background-color:var(--basic-0);
	box-shadow:0 0 0 2px var(--secondary-600);
	transition:background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/*Custom Control - Label - After*/
.custom-control-label::after
{
	top:50%;
	transform:translateY(-50%);
	left:-24px;
	width:24px;
	height:24px;
	border:0;
	background-repeat:no-repeat;
	background-size:auto;
}

/*Custom Control - Disabled*/
.custom-control-input:disabled ~ .custom-control-label,
.custom-control-input[disabled] ~ .custom-control-label
{
	color:var(--basic-400);
	cursor:not-allowed;
}

/*Custom Control - Before*/
.custom-control-input:not(:disabled):active ~ .custom-control-label::before
{
	background-color:var(--secondary-100);
}
.custom-control-input:not(:disabled):checked:active ~ .custom-control-label::before
{
	background-color:var(--secondary-100);
	box-shadow:0 0 0 2px var(--secondary-100);
}
.custom-control-input:focus ~ .custom-control-label::before
{
	box-shadow:0 0 0 2px var(--secondary-600);
}

/*Custom Control - Before - Disabled*/
.custom-control-input:disabled ~ .custom-control-label::before,
.custom-control-input[disabled] ~ .custom-control-label::before
{
	background-color:var(--basic-200);
	box-shadow:0 0 0 2px var(--basic-300);
}