/* -- CHECKBOX Styles input -- */
.filter-3__filter-checkbox {
  --width-checkbox: 20px;
  --bg-checkbox: var(--dark);

  /* Label styles */
  label {
    display: flex;
    gap: calc(var(--space-xs) / 2);
    position: relative;
    user-select: none;
    align-items: center;
    
    /* Focus input styles */
    &:focus-within{
      &:before{
        outline-style: solid;
        outline-color: var(--dark);
        outline-width: 0.15rem;
        outline-offset: 0.15em;
      }
    }

    /* Unchecked checkbox styles */
    &:before {
      border-color: var(--bg-checkbox); 
      border-radius: 0;
      border-width: 1px;
      border-style: solid;
      width: var(--width-checkbox);
      height: var(--width-checkbox);
      display: block;
      content: '';
    }
		
    /* Checkbox styles when checked */
    &:has(input[checked="checked"]), &.brx-option-active {
			/* Background checkbox */
      &:before {
        background-color: var(--bg-checkbox);
      }
			
      /* Icon styles in the checkbox */
      &:after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48px' viewBox='0 -960 960 960' width='48px' fill='%23FFFFFF'%3E%3Cpath d='M378-222 130-470l68-68 180 180 383-383 68 68-451 451Z'/%3E%3C/svg%3E");
        background-position: 50%;
        background-size: contain;
        background-repeat: no-repeat;
        width: var(--width-checkbox);
        height: calc(var(--width-checkbox) * .8);
        border: 1px solid transparent;
        position: absolute;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        content: '';
      }
    }

    /* Input default hidden*/
    input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }
  }
}


/* -- Radio Styles input -- */
.filter-3__filter-radio {
  --width-radio: 20px;
  --bg-radio: var(--dark);

  /* Label styles */
  label {
    display: flex;
    gap: calc(var(--space-xs) / 2);
    position: relative;
    user-select: none;
    align-items: center;
    
    /* Focus input styles */
    &:focus-within{
      &:before{
        outline-style: solid;
        outline-color: var(--dark);
        outline-width: 0.15rem;
        outline-offset: 0.15em;
      }
    }

    /* Unchecked radio styles */
    &:before {
      border-color: var(--bg-radio); 
      border-radius: var(--radius-xl);
      border-width: 1px;
      border-style: solid;
      width: var(--width-radio);
      height: var(--width-radio);
      display: block;
      content: '';
    }
		
    /* Radio styles when checked */
    &:has(input[checked="checked"]) {
			/* Background radio */
      &:before {
        background-color: var(--bg-radio);
      }
			
      /* Icon styles in the radio */
      &:after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48px' viewBox='0 -960 960 960' width='48px' fill='%23FFFFFF'%3E%3Cpath d='M378-222 130-470l68-68 180 180 383-383 68 68-451 451Z'/%3E%3C/svg%3E");
        background-position: 50%;
        background-size: contain;
        background-repeat: no-repeat;
        width: var(--width-radio);
        height: calc(var(--width-radio) * .8);
        border: 1px solid transparent;
        position: absolute;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        content: '';
      }
    }

    /* Input default hidden*/
    input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }
  }
}

document.addEventListener('DOMContentLoaded', () => {
  // Add “Filter wrapper” element class
  const filterPanel = document.querySelector('.filter-3__filter-wrapper');
  // Adds the class of the “Content” element of the offcanvas element
  const mobileContainer = document.querySelector('.filter-3__offcanvas-content');
  // Adds the class of the “Content container” element
  const desktopContainer = document.querySelector('.filter-3__content-container');

  // Add the media query that you want to display the filters inside the offcanvas
  const mediaQuery = window.matchMedia('(max-width: 991px)');

  function moveFilterContent(e) {
    if (e.matches) {
      // If the screen width is less than or equal to 991px (mobile/tablet)
      if (!mobileContainer.contains(filterPanel)) {
        mobileContainer.appendChild(filterPanel);
      }
    } else {
      // If the screen width is greater than 991px (desktop)
      if (!desktopContainer.contains(filterPanel)) {
        desktopContainer.appendChild(filterPanel);
      }
    }
  }

  // Listen for changes in the media query
  mediaQuery.addEventListener('change', moveFilterContent);

  // Execute on page load to ensure the filter is placed correctly
  moveFilterContent(mediaQuery);
});