.filter-1__filter-checkbox {
  --width-checkbox: 20px;
  --bg-checkbox: var(--neutral);
  --border-color: var(--neutral-light);
  --border-radius: var(--btn-radius);

  
  label {
    display: flex;
    gap: calc(var(--space-xs) / 2);
    position: relative;
    user-select: none;
    align-items: center;

    
    &:focus-within {
      &:before {
        outline-style: solid;
        outline-color: var(--focus-color);
        outline-width: var(--focus-width);
        outline-offset: var(--focus-offset);
      }
    }

    
    &:before {
      border-color: var(--border-color);
      border-radius: var(--border-radius);
      border-width: 2px;
      border-style: solid;
      width: var(--width-checkbox);
      height: var(--width-checkbox);
      display: block;
      content: '';
    }

    
    &:has(input[checked="checked"]),
    &.brx-option-active {

      
      &:before {
        background-color: var(--bg-checkbox);
        border-color: var(--bg-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 {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }
  }
}



.filter-1__filter-radio {
  --width-radio: 20px;
  --bg-radio: var(--neutral);
  --border-color: var(--neutral-light);
  --border-radius: var(--radius-circle);

  
  label {
    display: flex;
    gap: calc(var(--space-xs) / 2);
    position: relative;
    user-select: none;
    align-items: center;

    
    &:focus-within {
      &:before {
        outline-style: solid;
        outline-color: var(--focus-color);
        outline-width: var(--focus-width);
        outline-offset: var(--focus-offset);
      }
    }

    
    &:before {
      border-color: var(--border-color);
      border-radius: var(--border-radius);
      border-width: 2px;
      border-style: solid;
      width: var(--width-radio);
      height: var(--width-radio);
      display: block;
      content: '';
    }

    
    &:has(input[checked="checked"]) {

      
      &:before {
        background-color: var(--bg-radio);
        border-color: var(--bg-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 {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }
  }
}