/* **********************************
  *
  filter simple
  *
  ********************************** */
form.views-exposed-form.views-exposed-form:not(:has(.group-group_1)) {
  padding: var(--gin-spacing-l);

  .views-exposed-form__item {
    margin-block: 0;
  }

  .form-element--type-select {
    min-width: 14rem;
    max-width: none;
  }
}


/* **********************************
 *
 filter with more filters
 *
 ********************************** */
.uv-members-api-party-committee-function-form, /*party/committees/x/edit-functions*/
.uv-members-api-party-division-process-form, /*party/division/x/processes*/
.uv-members-api-party-division-processed-form, /*party/division/x/processed*/
.uv-members-api-party-division-members-form, /*party/division/x/members*/
.uv-member-process-list, /*crm/process   +   crm/processed*/
.uv-members-api-party-member-list, /*crm/members/*/
.uv-members-api-party-member-former-list, /*crm/former-members*/
.uv-members-api-party-member-former-division-changed-list, /*crm/former-members/division-change*/
.uv-members-api-party-division-list, /*party/divisions*/
.uv-members-api-party-mandate-list, /*party/mandates*/
.uv-members-api-party-function-list, /*party/positions*/
.uv-members-api-party-committee-list, /*party/committees*/
.view-filters {
  container-type: inline-size;
}

form.views-exposed-form.views-exposed-form:has(.group-group_1) { 
  justify-content: space-between;
  padding: var(--gin-spacing-l);

  @container (width >= 1024px) {
    gap: 0 42px;
    display: grid;
    grid-template-columns: 1fr max-content;
    grid-row-gap: 12px;
  }

  .group-group_1 {
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
    display: flex;

    @container (width >= 824px) {
      order: -1;
      width: 72%;
    }

    @container (width >= 1024px) {
      margin: 0;
      width: 100%;
    }

    @container (width >= 1280px) {
      display: grid;
      grid-template-columns: repeat(auto-fill, 252px);
    }

    @container (width >= 1440px) {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(270px, max-content));
    }

    > div {
      @container (width >= 1024px) {
        flex: 1 1 clamp(202px, 22%, 270px);
        min-width: 202px;
        max-width: 100%;
      }  

      input {
        width: 100%;
        max-width: unset;
      }
    }

    &:has(> :nth-child(5):last-child) {
      @container (width >= 1024px) {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, max-content));
      }

      @container (width >= 1440px) {
        grid-template-columns: repeat(auto-fill, minmax(220px, max-content));
      }

      @container (width >= 1600px) {
        grid-template-columns: repeat(auto-fill, minmax(270px, max-content));
      }
    }
  }
  
  .form-actions {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    gap: 12px;
    align-items: center;
    margin: 0;

    @container (width >= 824px) {
      order: -1;
    }

		> .button {
			margin: 0;
		}
  }

  fieldset,
  div.fieldset__wrapper {
    margin: 0;
    padding: 0;
    border: 0;
  }

  div.form-item {
    margin-block: 0;
    margin: 0;
  }
}

.views-exposed-form.views-exposed-form {
  .form-actions {
    input[id^="edit-reset--"] {
      font-size: 0;
      background-image: url('/modules/custom/uv_admin/icons/close_dark.svg');
      background-size: 12px 12px;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
      width: 40px;
      height: 40px;
      border-color: #C3C3C3!important;

      &:hover, &:focus {
        background-color: transparent;
        border-color: #000!important;
      }
    }
  }
}

.views-exposed-form.views-exposed-form .group-group_2,
.views-exposed-form.views-exposed-form .group-group_3,
.views-exposed-form.views-exposed-form .group-group_4 {
  display: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, max-content);
  gap: 12px;
  grid-column: 1 / span 2;
  align-items: center;
  padding: var(--gin-spacing-m);
  background: rgba(246, 247, 254, .9);
  border-radius: 6px;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
}

.views-exposed-form.views-exposed-form .group-group_4 {
  padding-bottom: var(--gin-spacing-m);
}

.views-exposed-form.views-exposed-form .group-group_2 {
  margin: var(--gin-spacing-m) 0 0;
}

form.views-exposed-form.views-exposed-form .group-group_1,
form.views-exposed-form.views-exposed-form > .form-wrapper.active {
  width: 100%;
  gap: 12px;
  opacity: 1;
  max-height: unset;
  opacity: 1;
  visibility: visible;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
  display: flex;

  @container (width >= 1024px) {
    margin: 0;
    width: auto;
  }

  @container (width >= 1280px) {
    display: grid;
    grid-template-columns: repeat(auto-fill, 252px);
  }

  @container (width >= 1440px) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, max-content));
  }

  div.form-item {
    align-self: start;

    @container (width >= 1440px) {
      width: auto;
    }
    
    > * {
      width: 100%;
      max-width: 270px;
      min-width: 0;
      
      &.chosen-container {
        width: 100% !important;
      }
    }   
  }
}
    
form.views-exposed-form.views-exposed-form > .form-wrapper.active {
  > div {
    @container (width >= 1024px) {
      flex: 1 1 clamp(202px, 22%, 270px);
      min-width: 202px;
      max-width: 272px;
    }
  }
}


.group-group_1 {
  grid-row: 1;  
}

.group-group_2.active {
  grid-row: 2;
}

.group-group_3.active {
  grid-row: 3;
}

.group-group_4.active {
  grid-row: 4;
}

#wrapper-dropdown {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 40px;
	width: 50px;
}

.filters-button {
	position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: var(--vierzwo-transition-short);

  svg {
    fill: var(--gin-color-primary);
  }

  &:hover,
  &.focus {
    background: var(--gin-color-primary-light);
  }
}

.form-type--select select.form-select {
	appearance: none;
	width: auto;
	/* min-width: 250px; */
	min-height: calc(var(--input-padding-vertical) * 2 + var(--input-line-height));
	padding-block: calc(var(--input-padding-vertical) - 1px);
	padding-inline: var(--input-padding-horizontal);
	color: var(--gin-color-text);
	font-size: var(--font-size-m);
	line-height: var(--input-line-height);
	border: 1px solid var(--gin-border-color-form-element);
	border-radius: var(--gin-border-m);

	@supports (appearance: base-select) {
    &,
    &::picker(select) {
      appearance: base-select;
      background-image: none;
    }
  }

  option {
	  padding: 10px;
	  border-top: 1px solid var(--gin-border-color-form-element);
	  cursor: pointer;
	  transition-property: color, background;
	  transition-duration: .2s;
	  transition-timing-function: ease-out;
    text-wrap: auto;
    box-sizing: border-box;

	  &:where(:hover, :focus, :active) {
	    background: #fcecf5;
	  }
	  &:checked {
	    background: #fcecf5;
	  }
	  &::checkmark {
	    display: none;
	  }
	  &:first-child {
	    border: 0;
	  }
	}
}

.chosen-drop:not(:has(.chosen-search)) {
  margin-left: -12px;
}

/* **********************************
 *
 overwrite chosen
 *
 ********************************** */
div.chosen-container-active .chosen-single,
div.chosen-container-active .chosen-choices,
div.chosen-container-active .chosen-drop {
  border-color: var(--gin-border-color-form-element);
}

div.chosen-container .chosen-results li.highlighted {
  background-color: var(--gin-color-primary);
  color: #fff;
}

.chosen-container-multi .chosen-choices {
  padding: 0;
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  margin: 0;
  padding: 0;
}

.chosen-container-multi .chosen-choices li.search-choice {
  border: 0;
  background: #f3f4f7;
  border-radius: 5px;
  font-size: 14px;
  padding: 4px 20px 5px 5px
}

.chosen-container .search-choice-close {
  top: 1px;
  opacity: .5;
}

#edit_field_mailers_chosen{
  width: 100% !important;
}


/* **********************************
 *
 filter field
 *
 ********************************** */

/* Anmeldestatus */
.form-item--field-registration-status-value {

  .chosen-container {
    min-width: 225px;
  }

  .chosen-results li {
    display: inline-flex;
    margin-block-end: 6px;
    padding: 6px 10px;
    justify-content: center;
    align-items: center;
    line-height: 1;
    border-radius: 5px;
  }

  li[data-value="registered"] {
    background: var(--status-registered);
  }

  li[data-value="invited"] {
    background: var(--status-invited);
  }

  li[data-value="attended"] {
    background: var(--status-attended);
  }

  li[data-value="captured"] {
    background: var(--status-captured);
  }

  li[data-value="pending_opt_in"] {
    background: var(--status-opt-in);
  }

  li[data-value="deregistered"] {
    background: var(--status-deregistered);
  }

  li[data-value="registered_unconfirmed"] {
    background: var(--status-unconfirmed);
  }
}

/* ***************************************************** */

.select2-search__field {
  width: auto !important;
}

.select2-selection__choice__remove {
  margin-left: 5px;
}

.select2-container--gin .select2-selection--multiple {
  min-height: unset !important;
}

.select2-container--gin.select2-container--focus {
  box-shadow: none !important;
}

.select2-container--gin .select2-selection--multiple .select2-search--inline {
  padding: 0!important;
}

.select2-container--gin .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  max-width: min-content;
  flex-direction: column-reverse;

  li:not(:last-child) {
    margin-top: 5px;
  }
}


.view-filters,
.views-exposed-form {
  .select2-container--gin {
    .select2-selection--multiple {
      border: 0;
      outline: 0;
      padding: 0;
      background-color: transparent;

      ul {
        max-width: unset;
      }

      .select2-selection__choice {
        margin-right: 0;
        border-radius: 0;
        width: 100%;

        .select2-selection__choice__remove {
          height: 20px;
          width: 20px;
          padding: 0;
          flex-shrink: 0;

          &:before {
            mask-size: 22px;
          }
        }
      }

      .select2-selection__rendered {
        padding: 0;
      }

      .select2-search {
        color:var(--gin-color-text);
        line-height:1.5rem;
        padding-block:calc(0.5rem - 1px);
        padding-inline:0.5rem;
        min-height: 40px;
        background-color:var(--gin-bg-input);
        border:1px solid var(--gin-border-color-form-element);
        border-radius:var(--gin-border-m);
        transition:var(--gin-transition);
        width: 100%;
        box-sizing: border-box;

        input {
          width: 100% !important;
          height: 40px;
          padding: var(--input-padding-vertical) var(--input-padding-horizontal);
        }
      } 
    }

    .select2-selection:hover {
      border: 0;
      box-shadow: none;
    }
  }

  .select2-container--gin.select2-container--focus .select2-selection--multiple {
    border: 0;
    outline: 0;
    padding: 0;
    box-shadow: none;

    .select2-search {
      border:solid black 1px;
      outline:0;
    }
  }
}

/* 
  Memdex Filters
 */

#edit-search-container {
  background: var(--gin-bg-layer);
  border: 1px solid var(--gin-border-color-layer);
  box-sizing: border-box;
  box-shadow: var(--gin-shadow-l1);
  border-radius: var(--gin-border-l);
  margin-block-end: var(--space-l);
  justify-content: space-between;
  padding: var(--gin-spacing-l);

  @container (width >= 1024px) {
    gap: 0 42px;
    display: grid;
    grid-template-columns: 1fr max-content;
    grid-row-gap: 12px;
  }

  #edit-primary-filters {
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
    display: flex;
    align-items: start;

    @container (width >= 824px) {
      order: -1;
      width: 72%;
    }

    @container (width >= 1024px) {
      margin: 0;
      width: 100%;
    }

    @container (width >= 1280px) {
      display: grid;
      grid-template-columns: repeat(auto-fill, 270px);
    }

    @container (width >= 1440px) {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(270px, max-content));
    }

    > div:not(.filters-actions) {
      @container (width >= 1024px) {
        flex: 1 1 clamp(202px, 22%, 270px);
        min-width: 202px;
        max-width: 100%;
      }  

      input {
        width: 100%;
        max-width: unset;
      }    
    }

    &:has(> :nth-child(5):last-child) {
      @container (width >= 1024px) {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, max-content));
      }

      @container (width >= 1440px) {
        grid-template-columns: repeat(auto-fill, minmax(220px, max-content));
      }

      @container (width >= 1600px) {
        grid-template-columns: repeat(auto-fill, minmax(270px, max-content));
      }
    }

    > .form-item  {
      width: 100%;

      @container (width >= 600px) {
        width: 270px;
      }  

      * {
        /* width: 100% !important; */
        /* max-width: 270px; */
        min-width: 0;
      }

      .chosen-container {
        margin-block-start: 0;
      }
    }   
  }

  .filters-actions {
    .button:nth-of-type(2) {
      font-size: 0;
      background-image: url('/modules/custom/uv_admin/icons/close_dark.svg');
      background-size: 12px 12px;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
      width: 40px;
      height: 40px;
      border-color: #C3C3C3!important;

      &:hover, &:focus {
        background-color: transparent;
        border-color: #000!important;
      }
    }
  }

  .claro-autocomplete {
    width: 100%;
  }

  #edit-secondary-filters {
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
    display: flex;
    align-items: start;

    @container (width >= 824px) {
      order: -1;
      width: 72%;
    }

    @container (width >= 1024px) {
      margin: 0;
      width: 100%;
    }

    @container (width >= 1280px) {
      display: grid;
      grid-row: 2;
      grid-template-columns: repeat(auto-fill, 270px);
      align-items: end;
    }

    @container (width >= 1440px) {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(270px, max-content));
    }

    > div:not(.toggle-checkbox-wrapper) {
      @container (width >= 1024px) {
        flex: 1 1 clamp(202px, 22%, 270px);
        min-width: 202px;
        max-width: 100%;
      }  

      input:not(.form-checkbox) {
        width: 100%;
        max-width: unset;
      }

      .form-element.chosen-container-multi {
        width: 100% !important;
      }
    }

    > .form-item  {
      width: 100%;

      @container (width >= 600px) {
        width: 270px;
      } 
    }

    .toggle-checkbox {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;

      .form-checkbox {
        flex-shrink: 0;
      }

      .option {
        margin-bottom: 0;
        margin-left: 15px;
      }
    }

    fieldset {
      border: 0;
      padding-block-start: 0;

      &:has(.form-type--date + .form-type--date) {
        grid-column: span 2;
        width: 100%;
      }
    }

    .fieldset__label {
      padding: 0;
    }

    .fieldset__wrapper:has(.form-date) {
      margin: 0;
      width: 100%;
      padding: 0;
      box-sizing: border-box;

      @container (width >= 800px) {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(262px, max-content));
        gap: 1rem;
      }

      .form-type--date {
        display: flex;
        align-items: center;

        &:has(~ div) { 
          margin-bottom: 5px;

          @container (width >= 800px) {
            margin-bottom: 0;
          }
        }

        .form-date {
          margin-left: 5px;
          width: 100%;
        }
        
        label {
          margin-bottom: 0;
          /* width: 35px; */
        }
      }
    }

    .fieldset__wrapper:has(.form-item--birthday-day) {
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: space-between;

      .form-item--birthday-month {
        select {
          min-width: 130px;
        }
      }
    }
  }
}