@import 'icons-person.css';

/* member / contact - edit */
form.person-entity-edit-form {

	.layout-region > .field-group-fieldset,
	.field--type-uv-extended-address-item {
		margin: 0 0 var(--space-l);
		padding: 32px;
		background: #fff;
		border-radius: 20px;
		border: 0;
		container-type: inline-size;

		.fieldset__wrapper {
			margin: 0;
		}
	}

	.field-group-fieldset	> legend .fieldset__label,
	.field--type-uv-extended-address-item .field-multiple-table thead th h4 {
		margin-block-end: var(--gin-spacing-l);
		padding: 0;
		font-size: var(--gin-font-size-m);
		font-weight: 600;
	}

	label,
	.form-item h4 {
		font-weight: 500;
		margin: 0 0 var(--space-xs);
	}

	.form-element {
		padding-block: var(--gin-spacing-s);
  	padding-inline: var(--gin-spacing-m);
	}

	.form-item,
	.form-items-inline {
  	margin-block: 0;
	}

	.fieldset__wrapper:has(.field--type-extended-email) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}

	.form-type--textfield {
		margin: 0;
	}

	#edit-group-weitere-angaben {
		grid-column: 1 / span 2;
		margin: -.5rem 0 0;
		border: 0;

		summary {
			padding: 0;
			font-size: var(--gin-font-size-s);
			font-weight: 400;
			border-bottom: 1px dotted var(--gin-color-primary);
			width: max-content;

			&:before,
			&:after {
				display: none;
			}

			&:hover,
			&:focus {
				background: transparent;
			}

			&:active,
			&:focus,
			&:focus-visible,
			&:focus-within, {
				border: 0;
				outline: 0;
			}
		}

		&[open] {

			.details-wrapper {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 28px;
				margin: 0;
				padding: var(--gin-spacing-m) 0 0;
			}
		}
	}

	.field--name-field-gender {
		grid-column: 1 / span 2;
		margin: var(--gin-spacing-m) 0;

		.fieldgroup {
			display: flex;
			align-items: center;
			gap: 16px;

			.form-item {
				margin-bottom: 0;
			}
		}

		.fieldset__label {
			margin: 0;
			font-weight: 500;
		}
	}

	.field--name-field-birthdate {
		.form-item,
		.form-element {
			width: 100%;
			margin: 0;
		}
	}

	.field--type-uv-extended-address-item,
	.field--type-extended-email,
	.field--type-extended-telephone {

	  .field-multiple-table thead th {
	    background-color: transparent!important;
	  }

	  h4 {
      color: var(--gin-color-title);
      font-size: 14px;
      padding: 0;
    }

	  tr {
	  	border: 0;
	  }

	  td {
	    padding: 0;
	    min-height: auto;

	    &:has(.ajax-progress) {
	      position: relative;
	      width: 32px;
	      height: 32px;
	      min-width: 32px;

	      input {
	        margin-right: 0;
	        display: none;
	      }

	      .ajax-progress {
	        position: absolute;
	        right: 50%;
	        top: 50%;
	        transform: translate(50%, -50%);
	        margin: 0;
	      }
	    }

	    &:has(.form-submit) {
	      display: flex;
	      justify-content: end;
	      align-items: center;
	    }
	  }

	  th.field-label {
	    display: table-cell;
	    padding: 0;
	    height: auto;
	    + th {
	      display: none;
	    }
	  }

	  table .form-submit.button {
	  	position: relative;
	  	z-index: 1;
	  	margin: -1.25rem 0 0;
	    padding: 0 0 1rem;
	    color: #000;
	    font-size: var(--gin-font-size-s);
	    font-weight: 400;
	    background-color: transparent;
	    border: 0 !important;
	    border-radius: 0;
	    box-shadow: none;

	    &:hover,
	    &:focus {
	    	color: (--gin-color-primary);
	    }
	  }

	  .ajax-progress__message {
	    display: none;
	  }
	  
	  .tabledrag-cell {
	    display: none;
	  }

	  .ajax-new-content {
	    gap: 20px;
	    display: flex;
	    align-items: center;
	    width: 100%;
	  }

	  .js-form-type-select {
	    gap: 20px;
	    display: flex;
	    flex-shrink: 0;

	    .form-required {
	      display: none;
	    }
	  }

	  tr {
	    &:has(.js-form-type-email),
	    &:has(.phone_ajax_wrapper) {
	      @container (width <= 450px) {
	        gap: 20px;

	        .form-type--checkbox {
	          margin-left: auto;
	          margin-right: -62px;
	        }
	      }
	    }
	  }

	  .ajax-new-content:has(.js-form-type-email),
	  .ajax-new-content:has(.phone_ajax_wrapper),
	  td:has(.js-form-type-email),
	  td:has(.phone_ajax_wrapper) {
	    display: grid;
	    gap: 6px 12px;
	    align-items: center;
	    width: 100%;
	    margin-block: 0;

	    @container (width > 750px) {
	    	grid-template-columns: 61% 1fr;
	    }

	    .form-item {
	    	display: flex;
	    	align-items: center;
	    	gap: 4px;
	    	margin-block-end: 0;

	    	label {
	    		margin: 2px 0 0;
	    	}
	    }

	    .form-type--select {
	      min-width: unset;
	    }
	  }

	  tbody tr + tr td:has(.js-form-type-email),
	  tbody tr + tr td:has(.js-form-type-tel) {
	  	display: block;
	  	margin-top: var(--space-m);
	  }

	  table {
	    thead {
	      th:last-child {
	        display: none;
	      }

	      th.field-label {
	        + th {
	          display: none;
	        }
	      }
	    }
	  }

	  .phone_ajax_wrapper,
	  .js-form-type-email {
	    width: 100%;
	    margin-block: 0;
	    
	    input {
	      width: 100%;
	    }
	  }

	  .form-type--checkbox {
	    margin: 0;
	    cursor: pointer;

	    label {
	      margin: 0;
	    }

	    &:hover, &:active, &:focus {
	      label {
	        display: block;
	        color: #555;
	        margin-right: 10px;
	      }
	    }

	    input {
	      margin-inline-start: 0;
	    }
	  }
	}

	.field--type-extended-email,
	.field--type-extended-telephone {
	  & .js-form-type-select {
	    flex-shrink: inherit;
	  }

	  .form-type--checkbox {
	   

	    &:hover, &:active, &:focus {
	      label {
	        margin-right: 0;
	      }
	    }
	  }
	}

	.field--type-extended-email,
	.field--type-extended-telephone,
	.field--type-uv-extended-address-item {
	  .form-type--select {
	    position: relative;
	    min-width: 200px;

	    &:not(:has(.chosen-container)) {
	      &:after {
	        content: "";
	        position: absolute;
	        top: 50%;
	        right: 14px;
	        width: 0;
	        height: 0;
	        pointer-events: none;
	        border-left: 6px solid transparent;
	        border-right: 6px solid transparent;
	        border-top: 10px solid currentColor;
	        transform: translateY(-50%);
	      }

	      select.form-select {
	        width: 100%;
	        max-width: 100%;
	        min-width: 0 !important;
	        box-sizing: border-box;
	        display: block;
	        white-space: nowrap;
	        overflow: hidden;
	        text-overflow: ellipsis;
	        padding-inline-end: 36px;
	        appearance: none !important;
	        -webkit-appearance: none !important;
	        background-image: none !important;
	      }
	    } 
	  }
	}

	.person-entity-add-form,
	.person-entity-edit-form {
	  container-type: inline-size;
	    
	  .form-type--email {
	    position: relative;

	    &:before {
	      content: url('/modules/custom/uv_admin/icons/mail.svg');
	      position: absolute;
	      left: 8px;
	      top: 10px; /* hotfix:  ToDO optimize svg */
	      pointer-events: none;
	    }

	    input {
	      padding-left: calc(var(--input-padding-horizontal) + 24px);
	    }
	  }

	  .form-type--select {
	    max-height: 40px;
	  }
	}

	.person-entity-add-form,
	.person-entity-edit-form {
	  .form-type--tel {
	    position: relative;

	    &:before {
	      content: url('/modules/custom/uv_admin/icons/phone.svg');
	      position: absolute;
	      left: 8px;
	      top: 11px; /* hotfix:  ToDO optimize svg */
	      pointer-events: none;
	    }

	    input {
	      padding-left: calc(var(--input-padding-horizontal) + 24px);
	    }
	  }

	  .form-type--select {
	    max-height: 40px;
	  }
	}



/* Section Address */
	.field--type-uv-extended-address-item {
		
		.form-item {
			margin: 0;
		}

		.form-element {
			min-height: auto;
		}

	  thead th.field-label {
	    display: table-cell;
	  }

	  td {
	    &:has(.ajax-new-content) {
	      width: 100%;
	    }

	    &:has(.form-submit) {
	      align-self: end;
	      margin-left: 15px;
	      margin-bottom: 24px; 
	    }

	    &:has(.ajax-progress) {
	      .ajax-progress {
	        bottom:0;
	        margin: 0;
	        transform: unset;
	      }
	    }

	    &:has(.uv-core-address-autocomplete) {
		    display: grid;
		    gap: 6px 12px;
		    align-items: center;
		    width: 100%;
		    margin-block: 0;
	  	}
	  }

	  .chosen-drop {
	    margin-left: 0;
	  }

	  .uv-core-address-autocomplete {
	    padding: 0;

	    .form-type--textfield label,
	    .js-form-type-select label {
        display: none;
      }
	    
	  } 

	  tbody .form-item.form-type--select {
	    margin: 0;

	    select {
	      width: 100%;
	    }
	  }

	  [id^="field-address-"][id*="-address-ajax-wrapper"] {
	    > div {
	    	display: grid;
	      gap: 20px;
	      margin-block: 0;
	      align-items: center;
	      width: 100%;

	      &:has(:not(.js-form-item-field-address-0-address-postal-code)) {
	      	grid-template-columns: minmax(6%, auto) 1fr;
	      }

	      &:has( > :nth-child(6)) {
	        display: grid;
	        gap: 20px;
	        grid-template-columns: repeat(6, minmax(6%, auto));
	        align-items: end;

	        > div {
	        	grid-column: 1/-1;
	        }

	        > div:first-child {
	        	grid-column: 1 / span 2;
	        }

	        div[data-drupal-selector$="-address-country-code"] {
	        	grid-column: 3 / span 4;
	        }

	        .js-form-item-field-address-0-address-postal-code {
	        	grid-column: 1 / span 1;
	        }

	        .js-form-item-field-address-0-address-locality {
	        	grid-column: 2 / span 4;
	        }

	      }
	      
	      
	    } 

	    [id^="edit-field-address-"][id*="-address-country-code"] {
	      flex: 1;

	      .country {
	        width: 100%!important;

	        .chosen-single {
	          display: flex;
	          align-items: center;
	          padding: 0;
	        }
	      }
	    }
	  }

	  tr:has([id^="field-address-"][id*="-address-ajax-wrapper"] > div > :nth-child(6)) {
	    td:has(.form-submit) {
	      margin-bottom: 0;
	    }
	  }
	  
	  .address-container-inline {
	    display: grid;
	    gap: 20px;

	    > * {
	      width: 100%;
	      margin-block: 0 !important;
	    }
	  }

	  fieldset.uv-core-address-autocomplete div[class*="line1"],
	  fieldset.uv-core-address-autocomplete div[class*="line2"],
	  fieldset.uv-core-address-autocomplete div[class*="line3"] {
	    grid-column: 1 / span 2;
	    margin: 0;
	  }

	  fieldset.uv-core-address-autocomplete .address-container-inline {
	    grid-column: 1 / span 2;
	    grid-template-columns: 17% minmax(0, 1fr);
	    align-items: end;

	    select {
	      height: 40px;
	    }
	  }

	  tr {
	    [id^="edit-field-address-"][id$="-address"],
	    [id^="edit-field-address-"][id*="-address--"] {
	      &:has(> :nth-child(6)) {
	        .form-type--checkbox {
	          &:hover, &:active, &:focus {
	            label {
	              display: block;
	              color: #555;
	            }
	          }
	        }
	      }
	    }
	  }
	 
	  .form-type--checkbox {
	  	display: flex;
	  	align-items: center;
	  	gap: 4px;

	    label {
	    	position: static;
	    }

	    &:last-child {
	      grid-column: 1 / span 2;
	      margin: 0;
	    }
	  }

	  .draggable {
	   
	    > td:nth-child(2) {
	      width: 100%;

	      &:has(.ajax-progress__throbber) {
	        div[class*="js-form-item-address"] {
	          display: none;
	        }
	      }
	    }

	    &+ .draggable  {
	  		display: block;
	  		margin-top: var(--space-l);
	  		padding-top: var(--space-l);
	  		border-top: 1px solid var(--vierzwo-gin-grey);
	    }
	  }

	  .address-container-inline {
	    + .form-type--checkbox {
	      margin: 0;
	    }

	    .form-type--textfield + .form-type--select {
	      margin-top: 10px !important;
	    }

	    select, .chosen-container {
	      width: 100% !important; 
	    }
	  }

	  div[class*="-address-country-code"] {
	    .ajax-progress{
	      right: -25px;
	      top: 25px;
	    }
	  }

	  .ajax-new-content {
	    .form-type--checkbox {
	      margin: 0;
	    }
	  }
	}

	fieldset.uv-core-address-autocomplete {
	  border: 0;
	  width: 100%;
	  position: relative;

	  .fieldset__wrapper {
	    margin: 0;
	  } 
	}

	div:has(> input.uv_extended_radio) {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.uv-core-address-autocomplete div:has(> input.uv_extended_radio) {
		padding: 0 0 0 28px;

		label {
			margin: 0;
		}
	}

}