
// LEGACY 6.0


.fieldset-group {
	display: flex;
}

fieldset.tbl-search{
	margin-bottom: 8px;
	min-height: 26px;
	position: relative;
	z-index: 2;

  @include m-tablet-down {
    width: 100%;
  }

		input[type='text']{
			margin: 0 0 5px;
			width: 150px;

      @include m-tablet-down {
        width: 100%;
      }

				@include m-tablet-up {
					margin: 0;
					width: 200px;
				};
		}

		&.right{
			float: right;
		}

		@include m-tablet-up {
			margin-bottom: 0;
		};
}

.fieldset-faux {
	margin-bottom: $s-m;

	&.hide-block { display: none;}
}

fieldset {
    margin: 0;
	// padding: 15px 20px;
	padding: 0;
	margin-bottom: $s-m;

    // margin-bottom: 25px;
	border: 0;
	min-width: 0;

	&.last {
		margin-bottom: 0;;
	}

	&.hide-block { display: none;}
}

.field-instruct {
    label {
      display: inline-block;
      color: color(text-normal);
		  // margin-bottom: $s-s;
		  margin-bottom: 5px;
      font-weight: 500;
		  // font-size: 14px;

		// Labels without an em after it need more margin
		&:last-child {
		margin-bottom: $s-s;
		}
	}

	p {
		margin-bottom: $s-s;
	}

    label + em {
        margin-top: - math.div($s-s, 2);
    }

    em {
        color: color(text-secondary);
        display: block;
        font-size: $font-size-small;
        font-style: normal;
        margin-bottom: $s-s;
	}

	margin-bottom: 5px;

	*:last-child {
		margin-bottom: 0;
	}
}

.fieldset-required{
	> .field-instruct {
		label {
			// @extend .fieldset-icon;

				&:after{
					@extend %fa-icon;
					@extend .fal;
					// @extend .fa-xs;

					// content: "*";
					content: fa-content($fa-var-asterisk);

					// @extend .font-monospace;
					color: color(brand-danger);
					font-size: 0.5em;
					position: relative;
					top: -3px;
					// font-size: 1.2em;
					margin-left: 3px;
				}
		}
	}
}

.fieldset-security-caution{
	> .field-instruct{
		label{

			&:after{
				@extend %fa-icon;
				@extend .fal;
				color: color(security-caution);
				margin-left: 10px;

				content: fa-content($fa-var-shield-alt);
			}
		}
	}
}

.field-control {
	em {
		display: block;
		margin-top: $s-xs;
		font-size: 12px;
	}
	.btn {
		display: inline-block;
    	margin-top: 10px;
	}
}


.fieldset-invalid {
	> .field-instruct{
		label{
			// .fieldset-icon;
			color: color(error);

			&:after{
				@extend %fa-icon;
				@extend .fal;
				font-size: $font-size-small;
				color: color(error);
				content: fa-content($fa-var-exclamation-triangle);
				top: -1px;
        margin-left: 3px;
			}
		}
	}

	> label {
		> .field-control{
			> em {
				color: color(error);
				font-style: normal;
			}
		}
	}

	> .field-control{
		> input,
		> textarea,
		.fields-select,
		.field-drop-selected,
		.field-drop-choices,
		> div > input,
		> div > textarea,
		.c-colorpicker-input{
			border: 1px solid color(error);
			// box-shadow: 0 0 0 1px color(error);

      &:focus {
        @include focus-outline-validation;
    	}
		}

		.field-drop-choices{
			border-width: 0 1px 1px;
		}

		> em {
			color: color(error);
			font-style: normal;
		}

		.fields-select {
			padding: 0 8px;
		}
	}

	.WysiHat-editor,
	.WysiHat-editor:focus{
		border: 1px solid color(error);
		box-shadow: 0 0 0 1px color(error);
	}

	.toolbar.rte{
		border: 1px solid color(error);
		border-width: 1px 1px 0;
		box-shadow: 0 0 0 1px color(error);
	}
}

.fieldset-invalid {
	> label{
		color: color(error);

		&:after{
			@extend %fa-icon;
			@extend .fal;
			font-size: $font-size-small;
			color: color(error);
			content: fa-content($fa-var-exclamation-triangle);
			top: -1px;
		}
	}
}

td.invalid {
	> input,
	> textarea,
	.fields-select,
	.field-drop-selected,
	.field-drop-choices,
	> div > input,
	> div > textarea,
	.c-colorpicker-input{
		border: 1px solid color(error);
	}
}

.format-options {
  margin-top: 10px;
}

.field-option .checkbox-label {
  margin-right: 5px;
  margin-bottom: 5px;
  display: inline-block;

  .checkbox-label__text {
    padding-left: 20px;
  }
}

// Styling for Checkbox Field options
#fieldset-field_value_label_pairs-value_label_pairs-field_pre_populate_n-field_list_items-field_pre_populate_y-field_pre_populate_id,
#fieldset-field_value_label_pairs-value_label_pairs-field_pre_populate_n-field_list_items {

  .fields-select {
    background-color: color(bg-0);
  	padding: 5px 10px;
    margin-top: 20px;
    margin-bottom: 10px;
  	border-radius: $border-radius-base;
  }

  .lots-of-checkboxes__search-input {
    margin-right: 0;

    .filter-bar__item {
      width: 100%;
    }
  }

  .field-inputs.lots-of-checkboxes__items {
    height: 250px;
    max-height: 1000px;
    overflow: auto;
    resize: vertical;
    position: relative;
    padding-top: 5px;

    /*
    &::after {
      height: 20px;
      width: 100%;
      content: "";
      box-shadow: 0 20px 20px color(panel-bg);
      position: absolute;
      bottom: 0px;
      left: 0px;
    }

    &::before {
      height: 20px;
      width: 100%;
      content: "";
      box-shadow: 0 20px 20px color(panel-bg);
      position: absolute;
      top: 0px;
      left: 0px;
    }
    */

    .field-group-head {
  		color: color(text-secondary);
  		font-size: 0.85em;
      font-weight: 500;
  		padding: 0 0 $s-xs 0;
      margin-top: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;

      &:first-child {
        margin-top: 0px;
      }
    }
  }
}

.fieldset---closed .field-instruct em {
    display:none;
}

.fieldset---closed .field-control {
    display:none;
}

.sub-arrow {
    cursor: pointer;
    padding-right: 1px;
    width: 16px;
    display: inline-block;
}

.sub-arrow:before {
    color: color(text-placeholder);
    @extend %fa-icon;
    @extend .fal;
    content: fa-content($fa-var-chevron-down);
    font-size: 10px;
    line-height: 0;
    margin-right: 5px;
    position: relative;
    top: -2px;

}

.field-closed .sub-arrow:before, .fieldset---closed .sub-arrow:before, .fluid-closed .sub-arrow:before {
    @extend %fa-icon;
    @extend .fal;
    content: fa-content($fa-var-chevron-right);
    top: -1px;
}

.rank-wrap {
  position: absolute;
  right: 45px;
  top: 8px;
  background: var(--ee-button-default-bg);
  text-transform: uppercase;

	.status-tag {
		background: none;
		text-transform: uppercase;
		max-height: 24px;
		line-height: 24px;
		padding: 0 8px;

		&.strong {
		  border-color: var(--ee-success);
		  color: var(--ee-success);
		}

		&.good {
		  border-color: var(--ee-warning);
		  color: var(--ee-warning);
		}

		&.weak {
		  border-color: var(--ee-error);
		  color: var(--ee-error);
		}
	}
}

// Password reveal toggle
fieldset {
	.eye,
	#eye {
		cursor: pointer;
		position: absolute;
		right: 15px;
		top: 48px;
	}
	.field-control {
		.eye,
		#eye {
			top: 12px;
			right: 5px;
		}
	}
}

@media not all and (min-resolution:.001dpcm) {
	@supports (-webkit-appearance:none) {
		fieldset {
			.eye,
			#eye {
				right: 35px;
			}

			.field-control {
				.eye,
				#eye {
					right: 35px;
				}
			}
		}
	}
}

// Publish form behavior for fieldsets
.panel-body__publish {


  fieldset, .fieldset-faux {
    width: 100%;
    display: inline-block;
    margin-bottom: 30px;
    padding-left: 15px;
    padding-right: 15px;
    vertical-align: top;
    font-size: 1rem; // reset for side-by-side fields

    .field-instruct,
    .field-control {
    	width: 100%;
    }

	&.hide-block { display: none;}

    // Override custom field widths
    @media (max-width: 899px) {
      width: 100% !important;
    }
  }

  tr.ui-sortable-helper {
		box-shadow: color(shadow-dropdown);
		background: color(accent-light);
	}
}

// Added style for Page Add-on Template setting
.fields-multiselect {
	label {
		display: flex;
		margin-bottom: 10px;
		align-items: center;

		@include m-tablet-down {
			display: block;
		}

		span {
			margin-right: 5px;
			min-width: 60px;

			@include m-tablet-down {
				max-width: 100%;
				display: block;
				margin-bottom: 5px;
			}
		}

		select {
			max-width: 100%;

			@include m-tablet-down {
				width: 100%;
			}
		}
	}
}