.checkbox_container {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;

  &.disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .checkbox_input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }

  .checkbox_custom {
    width: 16px;
    height: 16px;
    border: 2px solid #797583;
    border-radius: 4px; // use 50% for circle
    display: inline-block;
    position: relative;
    transition: all 0.2s ease;
    &.checkbox_grouped {
      margin-right: 12px;
    }
    // 🔹 minus (indeterminate) state
    &.checkbox_remove {
      background-color: var(--_primary-400);
      border-color: var(--_primary-400);

      &::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 8px !important;
        height: 1px !important;
        background: white !important;
        transform: translate(-50%, -50%) !important;
      }
    }
  }

  // checked state
  .checkbox_input:checked + .checkbox_custom {
    background-color: var(--_primary-400);
    border-color: var(--_primary-400);

    &::after {
      content: "";
      position: absolute;
      left: 4px;
      top: 0px;
      width: 3px;
      height: 7px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
  }

  .checkbox_label {
    font-size: 14px;
    color: var(--_gray-600);
  }
}

// radio button
.radio_container {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;

  &.disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .radio_input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }

  .radio_custom {
    width: 16px;
    height: 16px;
    border: 2px solid #999;
    border-radius: 50%; // round for radio
    display: inline-block;
    position: relative;
    transition: all 0.2s ease;
  }

  // checked state
  .radio_input:checked + .radio_custom {
    background-color: var(--_primary-400);
    border: 2px solid var(--_primary-400);

    &::after {
      content: "";
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #fff;
      transform: translate(-50%, -50%);
    }
  }

  .radio_label {
    font-size: 14px;
    color: var(--_gray-600);
  }
}