@import "../_util/index.import.less";

// Form Spacing
// Generic spacing for form elements
// Add class .fieldset
.fieldset {
  .clearfix;

	@fieldset-spacing: 1.25rem; //20px

	// All form components are wrapped in custom DOM
  // This is generic spacing for labelled and minimal forms
	// NOTE: Wrap any custom layouts in .fieldset-group

  > .input-label,
  > .input-symbol,
  > .textarea,
  > .textarea-label,
  > .select,
  > .select-label,
  > .btn {
    display: block;
    width: 100%;
  }

  //Minimal form spacing
	> .input-symbol,
  > .textarea,
  > .select,
  > .note-form,
  > .btn-group {
    margin-bottom: 1px;
    &:last-child:not(:only-child) { margin-bottom: 0; }
  }

  //Labelled form spacing
  > .input-label,
  > .textarea-label,
  > .select-label,
  .fieldset-group {
    margin-bottom: @fieldset-spacing;
    &:last-child { margin-bottom: 0; }
  }

  //Checkbox & Radio spacing
  > label.checkbox,
 	> label.radio {
    .font-s2;
    margin-bottom: @fieldset-spacing - .25rem;

		// Affordance for visual space when the checkbox is sandwiched
		// between a form element and a button
		& + .btn {
			margin-top: @fieldset-spacing - .5rem;
		}
  }
}


/* Generic */
legend {
  float: left;
  margin-bottom: 1em;
  width: 100%; // Forces 100% width, not a block element

	.font-s1;
	.subheading-caps;
	color: @color-dark;
}


label {
  .font-s2;
	.type-bold;
  clear: both;
  display: block;
  margin-bottom: .25em;

  &.hidden { display: none; }

	.sublabel,
  .alert {
		.font-s1;
		.type-normal;

		margin-left: .5em;

    color: @color-dark;
  }

	.alert {
		.type-italic;
		color: @color-negative;
	}
}

// Character counts and help text beneath forms
.subtext-form {
  .font-s1;
	.ellipsized;

  display: block;
  line-height: 2em;
	padding: 0 1.16em; //0 14px

	background-color: @color-light;
  color: @color-mediumdark;

	&.nochrome {
		background-color: transparent;
    padding: 0;
	}

  &.right { text-align: right; }

  .alert {
    .type-italic;
    color: @color-negative;
  }
}

.note-form {
  padding: .7111em 1em;
  text-align: center;

  .font-s2;
  background-color: @color-neutral;
  color: @color-darker;
}