
$checkbox-size: 15px;

@mixin checkbox($checkbox-size) {
  background-color: color(bg-0);
  transition: all 100ms ease;
	position: relative;
	width: $checkbox-size;
	height: $checkbox-size;
	margin: 0;
	padding: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	border: 1px solid color(border-dark);
	border-radius: $border-radius-xsmall;

	&:after {
		transition: all 100ms ease;
		content: "";
		display: block;
		position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
		opacity: 0;

		@extend %fa-icon;
		@extend .fal;
		@extend .fa-fw;
		font-size: math.div($checkbox-size, 1.3);

		margin: 0 !important;
		color: #fff !important;
		content: fa-content($fa-var-check);

	}

	&:checked, &.checkbox--checked {
		background: color(accent);
		border-color: color(accent);
		// box-shadow: 0 1px 2px rgba(#AE97FF, 0.05), 0 2px 10px rgba(rgb(97, 114, 242), 0.05);

		&:after {
			opacity: 1;
			// transform: rotate(45deg) scale(1);
		}
	}

	&:disabled, &.checkbox--disabled {
		cursor: not-allowed;
		opacity: 0.5;
	}

	&:focus {
    @include focus-visible {
  		@include focus-outline;
  	}
		border-color: var(--ee-input-focus-border);
	}

	&:active:not(:disabled) {
		transform: scale(0.9);
	}
}

.checkbox, input[type="checkbox"] {
	@include checkbox(15px);
}

.checkbox--large,
input[type="checkbox"].checkbox--large {
	@include checkbox(20px);
  border-radius: $border-radius-small;
}

.checkbox--small,
input[type="checkbox"].checkbox--small {
	@include checkbox(12px);
  border-radius: $border-radius-xsmall;
}

$radio-size: 15px;

.radio, input[type="radio"] {
	transition: all 100ms ease;
	position: relative;
	width: $radio-size;
	height: $radio-size;
	margin: 0;
	padding: 0;

	-webkit-appearance: none;
	-moz-appearance: none;

	cursor: pointer;
	// background: color(bg-10);
	border: 1px solid color(border-dark);
	// box-shadow: 0 2px 0 color(input-border-accent);;
	border-radius: 50%;

	&:after {
		transition: all 100ms ease;
		content: "";
		display: block;
		position: absolute;
		width: 5px;
		height: 5px;
		left: 4px;
		top: 4px;

		border-radius: 50%;
		background: #fff;
		transform: rotate(45deg) scale(0);
		opacity: 0;
	}

	&:checked, &.checkbox--checked {
		background: color(accent);
		border-color: color(accent);
		// box-shadow: 0 1px 2px rgba(#AE97FF, 0.05), 0 2px 10px rgba(rgb(97, 114, 242), 0.05);

		&:after {
			opacity: 1;
			transform: rotate(45deg) scale(1);
		}
	}

	&:disabled, &.checkbox--disabled {
		cursor: not-allowed;
		opacity: 0.5;
	}

	&:focus {
    @include focus-visible {
  		@include focus-outline;
  	}
		border-color: var(--ee-input-focus-border);
	}

	&:active:not(:disabled) {
		transform: scale(0.9);
	}
}

.small-checkbox-label {
	display: flex;
	cursor: pointer;

	input[type="checkbox"] {
		margin-right: 6px;
	}
}

.checkbox-label {
	display: block;
	$label-padding: $s-xs + 4px;
	margin-bottom: 0;
	position: relative;
  font-weight: normal;
  // pointer-events: none;

	.checkbox-label__text {
		display: inline-block;
		position: relative;
		padding: $label-padding - 4px;
		padding-left: $checkbox-size + 10px;
		// line-height: 21px;

		cursor: pointer;
		transition: background 100ms ease;
		color: color(text-primary);
		border-radius: 5px;
		// pointer-events: auto;

		&:hover {
			// background: color(bg-10);
		}

		&.checkbox-label__text-editable {
			display: block;
		}
	}

	input {
		z-index: 1;
		position: absolute;
		top: $label-padding;
		left: 0px;
		// pointer-events: auto;

    &.checkbox--large {
      z-index: 1;
      position: absolute;
      top: $label-padding - 2px;
      left: -5px;
    }
	}

	input:disabled + .checkbox-label__text {
		cursor: not-allowed;
		opacity: 0.6;

		&:hover  {
			background: transparent;
		}

		&:hover:checked {
			// background: color(bg-10);
		}
	}

	input:checked + .checkbox-label__text {
		// background: color(bg-10);
	}
}



.lots-of-checkboxes {
	border: 1px solid color(lots-of-checkboxes-border);
	border-radius: $border-radius-base;
  @include shadow-input;

	.checkbox-label__text {
		border-radius: 0;
	}
}

.lots-of-checkboxes__search {
	padding: $s-s;
	background: color(bg-0);
  border-bottom: 1px solid color(border);
  border-radius: $border-radius-base $border-radius-base 0 0;

	.lots-of-checkboxes__search-inner {
		display: flex;
		flex-wrap: wrap;
		// margin-top: -$s-s;
	}

	.lots-of-checkboxes__search-input {
		flex: 1 1;
		margin-right: $s-s;
	}

  .filter-bar {
    margin-top: 0px;

    .filter-bar__item {
      margin-bottom: 0px;
    }
  }

	// LEGACY 6.0
	.filter-item__search {
		width: 100%;
	}

	input[type="text"] {
		height: 30px;
		line-height: 30px;
		padding: 0 $sq-xs;
	}

  .ctrl-all {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;

    @include m-tablet-down {
      margin-top: 3px;
    }
  }

	// input, .ctrl-all {
	// 	margin-top: $s-s;
	// }
}

.lots-of-checkboxes .lots-of-checkboxes__items {
  padding: 5px 15px 15px;
}

.lots-of-checkboxes .splitForTwo {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  border-right: 2px solid var(--ee-border);

  h3 {
  	display: none;
    color: var(--ee-text-normal);
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 1em;
  }

  @include m-tablet-down {
  	display: block;
  	width: 100%;
  	border-right: none;
  	border-bottom: 2px solid var(--ee-border);

  	h3 {
  		display: block;
  	}
  }
}

.lots-of-checkboxes .second-list {
  border: none;
}

.lots-of-checkboxes__items--too-many {
	height: 250px;
    max-height: 1000px;
    overflow: auto;
	resize: vertical;

	.checkbox-label {
		margin-bottom: 0;
	}
}

.lots-of-checkboxes__selection {
	background: color(bg-0);
	padding: $s-s 15px;
	background: color(accent-light);
	border-top: 1px solid color(border);
	// box-shadow: 0 -5px 10px -10px rgba(#000, 0.2);

	.fas, .fal {
		color: color(accent);
	}
}

// LEGACY 6.0
ul.field-nested,
ul.field-nested ul {
	list-style-type: none;
	margin-bottom: 0;
	margin-top: 0;
}

.field-nested {
	.checkbox-label {
		margin-bottom: 0;
	}
}

// LEGACY 6.0
ul.field-nested ul {
	padding-left: 20px;

	li {
		label {
			border-left: 2px solid color(border-dark);
      padding-left: $s-s;
		}

    input[type="checkbox"],
    input[type="radio"] {
      left: $s-s;
    }

		ul {
			position: relative;

			&::before {
				content: "";
				display: block;
				width: 20px;
				height: 0;
				top: 0;
				left: 0;
				border-bottom: 2px solid color(border-dark);
				position: absolute;
			}
		}
	}
}

// LEGACY 6.0
.button-group-flyout-right {
	float: right;
}

.field-nested li {
	padding: 0;


	.checkbox-label__text-editable {
		display: block;
		&:before {
			position: absolute;
		  display: block;
		  content: '';
		  width: 10px;
		  height: 100%;
		  background: inherit;
		  top: 0;
		  left: -10px;
			border-bottom-left-radius: 5px;
  		border-top-left-radius: 5px;
		}

		.flyout-edit-icon {
		  padding: 5px 15px;
		  font-size: 0.8rem;
		  line-height: 1.5;
		  border-radius: 4px;
		  float: right;
		}
	}

	.checkbox-label:hover {
		.checkbox-label__text-editable {
			background: var(--ee-bg-0);
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
  		border-top-left-radius: 0;
  		border-bottom-left-radius: 0;
		}
	}

	&.nestable-item {
		& > ul.field-nested {
			.checkbox-label__text-editable:before {
				border-radius: 0;
			}
		}
	}
}

// Custom styling for Statuses checkbox lists
#fieldset-statuses {
	&.channel-statuses {
	  .checkbox-label {
	    background-color: color(bg-0);
	    border: 1px solid color(border);
	    @include shadow-input;
	    border-radius: $border-radius-base;
	    position: relative;
	    margin-bottom: 8px;

	    .checkbox-label__text {
	      height: 45px;
	      position: relative;
	    }

	    input[type="checkbox"] {
	      position: absolute;
	      top: 50%;
	      transform: translateY(-50%);
	      left: 40px;
	    }

	    .icon-reorder {
	      position: absolute;
	      top: 50%;
	      transform: translateY(-50%);
	      left: 15px;
	    }

	    .status-tag {
	      position: absolute;
	      top: 50%;
	      transform: translateY(-50%);
	      left: 67px;
	    }

	    .button-group.button-group-flyout-right {
	      position: absolute;
	      top: 50%;
	      transform: translateY(-50%);
	      right: 15px;
	    }
	  }
	}
}

// Custom styling for Categories checkbox lists
#fieldset-cat_group {
	&.channel-statuses {
		.checkbox-label {
			background-color: color(bg-0);
			border: 1px solid color(border);
			@include shadow-input;
			border-radius: $border-radius-base;
			position: relative;
			margin-bottom: 8px;

			.checkbox-label__text {
				height: 45px;
				position: relative;
				display: flex;
				align-items: center;
				padding-left: 35px;

				a {
					color: var(--ee-text-primary);
				}
			}

			input[type="checkbox"] {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 10px;
			}

			.button-group.button-group-flyout-right {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 15px;
			}
		}
	}
}

div[data-input-value="category_fields"] {
	.lots-of-checkboxes__selection { display: none;}

	.lots-of-checkboxes {
		.checkbox-label__text {
			padding-left: 10px;
		}
	}

	.checkbox-label:hover {
		.checkbox-label__text {
			background: var(--ee-bg-0);
			border-radius: 5px;
		}
	}
}

.extra-flyout-button {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;

	svg {
		width: 1.2rem;
		margin-left: 4px;
	}

	&[disabled] {
		pointer-events: none !important;

		svg {
			opacity: 0.55;
		}
	}
}