@use "mixins";

// sass-lint:disable class-name-format no-qualifying-elements id-name-format
//--------------------------------------------------------------
//   Layout helpers
//--------------------------------------------------------------

.ctct-form-wrapper {
  .ctct-form-field {
	margin: 0 0 1rem;
  }

  .ctct-field-inline {
	display: inline-block;
  }

  .ctct-field-half {
	@include mixins.wider-than("medium") {
	  float: left;
	  margin-right: 2%;
	  width: 48%;

	  &:last-of-type {
		margin-right: 0;
	  }
	}
  }

  .ctct-field-third {
	@include mixins.wider-than("medium") {
	  float: left;
	  margin-right: 2%;
	  width: 32%;

	  &:last-of-type {
		margin-right: 0;
	  }
	}
  }

  .ctct-field-fourth {
	@include mixins.wider-than("medium") {
	  float: left;
	  margin-right: 2%;
	  width: 24%;

	  &:last-of-type {
		margin-right: 0;
	  }
	}
  }

  .ctct-birthday-fields,
  .ctct-anniversary-fields {
	display: flex;

	&.ctct-birthday-label-,
	&.ctct-anniversary-label- {
	  &top {
		align-items: flex-end;

		.ctct-date-field-separator {
		  margin: 0 10px 1.5rem;
		}
	  }

	  &bottom {
		align-items: flex-start;

		.ctct-date-field-separator {
		  margin: 0.5rem 10px 0;
		}
	  }
	}
  }
}