Select field

                @use "../abstracts/css-util";


.select-field {
    position: relative;
    height: css-util.get-var(select-field, height);
    width: css-util.get-var(select-field, width);
    font-weight: css-util.get-var(select-field, text-weight);
    background: css-util.get-var(select-field, background) css-util.get-var(select-field, icon, selection) right 0.8rem center no-repeat;
    border-radius: css-util.get-var(select-field, radius);
    border: css-util.get-var(select-field, border-width) solid css-util.get-var(select-field, border-color);

    &:after {
        content: 'unfold_more';
        font-family: 'Material Symbols Outlined';
        position: absolute;
        top: 50%;
        right: 0.4rem;
        transform: translateY(-50%);
        font-size: 2.4rem;
        pointer-events: none;
        color: #959595;
    }

    &:has(.select-field-dropdown.active) {
        border: css-util.get-var(select-field, border-width) solid css-util.get-var(select-field, focus, border-color);
    }

    &:hover {
        border: css-util.get-var(select-field, border-width) solid css-util.get-var(select-field, hover, border-color);
    }

    &-selected {
        position: absolute;
        display: flex;
        align-items: center;
        font-weight: css-util.get-var(select-field, text-weight);
        width: 100%;
        padding: css-util.get-var(select-field, padding);
        font-family: css-util.get-var(select-field, font);
        color: css-util.get-var(select-field, text-color);
        font-size: css-util.get-var(select-field, text-size);
        height: css-util.get-var(select-field, height);
    }

    &-dropdown {
        min-width: auto;
        position: absolute;
        top: 4.5rem;
        left: -0.1rem;
        right: -0.1rem;
        overflow: hidden;
        display: none;
        min-width: auto;

        &.active {
            display: block;
        }
    }

    &:has(input:disabled) {
        border: css-util.get-var(text-field, border-width) solid css-util.get-var(text-field, disabled, border-color) !important;
        background: css-util.get-var(select-field, disabled, background) css-util.get-var(select-field, disabled, icon, selection) right 8px center no-repeat;
        color: css-util.get-var(select-field, disabled, text-color);
        cursor: auto;

        .select-dropdown {
            display: none;
        }
    }

    &-selected-item {
        background: css-util.get-var(dropdown-item, selected, background);
        position: relative;

        &::before {
            content: css-util.get-var(dropdown-item, selected, icon);
            position: absolute;
            left: 0.8rem;
        }
    }

    &-extrasmall-width {
        width: css-util.get-var(select-field-extrasmall, width);
    }

    &-small-width {
        width: css-util.get-var(select-field-small, width);
    }

    &-medium-width {
        width: css-util.get-var(select-field-medium, width);
    }

    &-large-width {
        width: css-util.get-var(select-field-large, width);
    }

    &-small-height {
        height: 3.2rem;

        .select-selected {
            padding: 0.6rem 1rem;
        }
    }

    &-error {
        border: css-util.get-var(select-field, border-width) solid css-util.get-var(select-field-error, border-color) !important;
    }
}


@media only screen and (max-width: 490px) {
    .select-field-selected {
        padding: 1.8rem;
    }
}
            

                
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.select-field').forEach(function (field) {
    const dropdown = field.querySelector('.select-field-dropdown');
    const input = field.querySelector('.select-field-input');
    const selectedDisplay = field.querySelector('.select-field-selected');
    const dropdownItems = field.querySelectorAll('.dropdown-item');

    // Toggle dropdown bij klik op select-field (behalve op een item zelf)
    field.addEventListener('click', function (e) {
      if (!e.target.closest('.dropdown-item')) {
        document.querySelectorAll('.select-field-dropdown.active').forEach(d => {
          if (d !== dropdown) d.classList.remove('active');
        });
        dropdown.classList.toggle('active');
      }
    });

    // Item selecteren
    dropdownItems.forEach(function (item) {
      item.addEventListener('click', function (e) {
        e.stopPropagation();

        // Input: alleen de tekst (zonder HTML)
        input.value = item.textContent.trim();

        // Display: volledige HTML overnemen
        selectedDisplay.innerHTML = item.innerHTML;

        dropdown.classList.remove('active');
      });
    });
  });

  // Klik buiten het component sluit alles
  document.addEventListener('click', function (e) {
    document.querySelectorAll('.select-field-dropdown.active').forEach(dropdown => {
      if (!dropdown.closest('.select-field').contains(e.target)) {
        dropdown.classList.remove('active');
      }
    });
  });
});